css在右侧对齐多行可编辑内容
css在右侧对齐多行可编辑内容
提问于 2018-07-23 06:38:34
我正在尝试做一个基本的多行输入表单与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>
正如您所看到的，在到达下一行之前，一切都或多或少有效，但我需要新行从与第一行相同的位置开始。
有什么想法吗？
回答 1
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51469804
复制相关文章
相似问题