javascript - css 在右侧对齐多行 contenteditable 内容

Question

我正在尝试使用 html css 等制作一个基本的多行输入表单...对于输入，我使用的是 contenteditable="true"span 而不是常规的，而且我也不想使用表格。

也就是说，我正在尝试将文本“标签”和输入框排成一行，如下图所示:

一切都或多或少地工作正常，除非 contenteditable 达到多行。我需要多行的东西与标签对齐而不是重置到行的开头。到目前为止，这是代码:

   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>

如您所见，在您到达下一行之前，一切都或多或少地工作，但我需要新行从与第一行相同的位置开始。

有什么想法吗？

Answer 1

请看下面的代码片段，我添加了 2 行:

display: inline-block; to .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>