如何对齐 html 表单输入和内容间距

Question

如何对齐表单输入、标签、文本区域和从 php 接收的数据之间的间距。其中可能有多行数据要显示。如果在中间添加东西，如何实现下一个元素的自动排列？

代码如下：（如何实现自动排列？有没有比下面代码更好的实现方法？）

li{text-decoration:none; list-style-type:none; } 
.left{ position:relative; left:100px;}
.right{ position:relative; left:200px;}
textarea{ position:relative; width:200px; height:70px; }

<html>
  <body>
<br><br>
    
<form>
  <ul>
    <label class="left">Status:</label><li class="right"><textarea name="status"></textarea></li><br><br>
      <label class="left">First name:</label><li class="right"><input type="text" name="firstname"></li><br><br>
     <label class="left">Last name:</label><li class="right"><input type="text"  name="lastname"></li><br><br>
        <label class="left">Address:</label><li class="right"><textarea name="address"></textarea></li><br><br>
        <label class="left">Address 2:</label><li class="right"><textarea  name="address2"></textarea></li>
    </ul>
  </form>
</body>
  </html>

Answer 1

您只需使用 CSS flexbox.

即可解决

display: flex 每个 li，每个 label 一些 flex-basis（在这种情况下 25% 并为每个 class input（比如textarea等）用flex: 1.

document.querySelector('#add').addEventListener('click', function() {
  var elem = document.createElement('li');
  elem.innerHTML = '<label>Lorem Ipsum</label><input type="text" class="field" />';
  document.querySelector('#list').appendChild(elem);
})

ul {
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  margin-bottom: .5em;
}

label {
  flex: 0 0 25%;
  text-align: right;
  padding-right: 1em;
  align-self: center;
}

.field {
  flex: 1;
}

<ul id=list>
  <li>
    <label for=status>Status:</label>
    <textarea class="field" id=status name="status"></textarea>
  </li>
  <li>
    <label for=firstname>First name:</label>
    <input class="field" id=firstname type="text" name="firstname">
  </li>
  <li>
    <label for=lastname>Last name:</label>
    <input class="field" id=lastname type="text" name="lastname">
  </li>
  <li>
    <label for=address>Address:</label>
    <textarea class="field" id="address" name="address"></textarea>
  </li>
  <li>
    <label for=address2>Address 2:</label>
    <textarea class="field" id="address2" name="address2"></textarea>
  </li>
</ul>

<button id=add>Add</button>

还添加了一个 for="..." 属性，以便在单击 label 时具有正确的行为（将 focus 放在相关的 input 上）。

如何对齐 html 表单输入和内容间距

How to align html form inputs and contents spacing

html

javascript

css