css在右侧对齐多行内容可编辑的内容

Question

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

话虽这么说，我正在尝试在文本“标签”和输入框的一行，如下图所示：

一切正常运行，除非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;至.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>