我正在尝试做一个基本的多行输入表单与html,css等…对于输入,我使用contenteditable=“真”跨度而不是常规跨度,而且我也不想使用表格。
也就是说,我尝试将文本"labels“和输入框排成一行,如下图所示:
每件事都或多或少地工作得很好,除非可满足的内容达到了多行。我需要多行的东西与标签对齐,而不是重置到行的开头。以下是到目前为止的代码:
input, .new_input {
border:0;
outline:0;
background:transparent;
border-bottom:1px solid black;
}
.titlething {
display:inline-block;
text-align:right;
width:80px;
margin-left:-20px;
}
#word_edit {
position:absolute;
max-width:300px;
border:1px #0F23D5 solid;
padding:4px;
background:#A1C9E4;
border-radius:15px;
padding:15px;
}
<div id="word_edit">
<label>
<span class="titlething">Meaning</span>
<span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br>
</label>
<label>
<span class="titlething">Phonetic</span>
<span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br>
</label>
<label>
<span class="titlething">Other</span>
<span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br>
</label>
<button data-name="done">Done!</button>
</div>
正如您所看到的,在到达下一行之前,一切都或多或少有效,但我需要新行从与第一行相同的位置开始。
有什么想法吗?
发布于 2018-07-23 07:51:14
请看下面的代码片段,我添加了两行:
display: inline-block;
到.new_input
和
vertical-align: top;
到.titlething
input,
.new_input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
display: inline-block;
}
.titlething {
display: inline-block;
text-align: right;
width: 80px;
margin-left: -20px;
vertical-align: top;
}
#word_edit {
position: absolute;
max-width: 300px;
border: 1px #0F23D5 solid;
padding: 4px;
background: #A1C9E4;
border-radius: 15px;
padding: 15px;
}
<div id="word_edit">
<label>
<span class="titlething">Meaning</span>
<span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br>
</label>
<label>
<span class="titlething">Phonetic</span>
<span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br>
</label>
<label>
<span class="titlething">Other</span>
<span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br>
</label>
<button data-name="done">Done!</button>
</div>
https://stackoverflow.com/questions/51469804
复制相似问题