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，每个flex-basis一些label（在这种情况下为25%，并为每个输入添加一个类（例如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表单输入和内容间距

1 个答案: