当我键入内容时,如何将所有元素移动到p段落contenteditable下。

这是我的代码:

body,
html {
  margin: 0;
  padding: 0;
  background-color: white;
}
.input {
  border: 1px dotted black;
  width: 30%;
  float: right;
  left: 45%;
  height: 40px;
  position: absolute;
  background-color: #8CE1FF;
  color: #6E6E6E;
  font-size: 16px;
  font-family: 'Arimo';
}
.input:hover {
  border: 1px solid black;
}
#content {
  border: 1px dotted black;
  width: 50%;
  float: right;
  position: absolute;
  background-color: #8CE1FF;
  color: #6E6E6E;
  font-size: 19px;
  font-family: 'Arimo';
  height: 40%;
}
#content:hover {
  border: 1px solid black;
}
.details {
  margin-bottom: 30px;
  z-index: 900;
  font-family: 'Arimo';
  font-size: 17px;
}
section {
  background-color: #53CFFC;
  margin: 20%;
  z-index: 901;
  border: 1px solid black;
}
#button {
  color: #C0C0C0;
  margin-top: 5%;
  background: #168CB7;
  border: 1px solid #0C8FBF;
  height: 40px;
  width: 100%;
  font-family: 'Arimo';
  font-size: 20px;
  position: relative;
}
#title {
  height: 40px;
  text-align: center;
  font-family: 'Arimo';
  font-size: 20px;
  background: #168CB7;
  color: #C0C0C0;
}
#form {
  padding: 4%;
}
<section>
  <div id="title">title</div>
  <div id="form">
    <div class="details">Name <strong>*</strong>:
      <input type="text" class="input" id="name">
      <br>
    </div>
    <div class="details">Mail <strong>*</strong> :
      <input type="text" class="input" id="mail">
      <br>
    </div>
    <div class="details">Website:
      <input type="text" class="input" id="name">
      <br>
    </div>
    <br>
    <div class="details">
      Text:
      <p id="content" contenteditable="true">Click to write your post.</p>
      <br>
    </div>
  </div>
  <button id="button" onclick="">Submit</button>
</section>


这是一个jsFiddle

最佳答案

  • word-wrap: break-word添加到#content
  • position:absolute更改为relative中的#content


  • body {
      margin: 0;
    
    }
    .input {
      border: 1px dotted black;
      width: 30%;
      float: right;
      left: 45%;
      height: 40px;
      position: absolute;
      background-color: #8CE1FF;
      color: #6E6E6E;
      font-size: 16px;
      font-family: 'Arimo';
    }
    .input:hover {
      border: 1px solid black;
    }
    #content {
      border: 1px dotted black;
      width: 100%;
      float: right;
      position: relative;
      background-color: #8CE1FF;
      color: #6E6E6E;
      font-size: 19px;
      font-family: 'Arimo';
      height: 40%;
      word-wrap: break-word
    }
    #content:hover {
      border: 1px solid black;
    }
    .details {
      margin-bottom: 30px;
      z-index: 900;
      font-family: 'Arimo';
      font-size: 17px;
    }
    section {
      background-color: #53CFFC;
      margin: 20%;
      z-index: 901;
      border: 1px solid black;
    }
    #button {
      color: #C0C0C0;
      margin-top: 5%;
      background: #168CB7;
      border: 1px solid #0C8FBF;
      height: 40px;
      width: 100%;
      font-family: 'Arimo';
      font-size: 20px;
      position: relative;
    }
    #title {
      height: 40px;
      text-align: center;
      font-family: 'Arimo';
      font-size: 20px;
      background: #168CB7;
      color: #C0C0C0;
    }
    #form {
      padding: 4%;
    }
    <section>
      <div id="title">title</div>
    
      <div id="form">
    
        <div class="details">Name <strong>*</strong>:
          <input type="text" class="input" id="name">
          <br>
        </div>
        <div class="details">Mail <strong>*</strong> :
          <input type="text" class="input" id="mail">
          <br>
        </div>
        <div class="details">Website:
          <input type="text" class="input" id="name">
          <br>
        </div>
    
        <br>
        <div class="details">Text:
          <p id="content" contenteditable="true">Click to write your post.</p>
          <br>
        </div>
    
      </div>
    
    
      <button id="button" onclick="">Submit</button>
    </section>

    10-02 19:31