当我键入内容时,如何将所有元素移动到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>