如何对齐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 flex-basis ，每个label一些flex-basis （在这种情况下为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 个解决方案

解决方案1
1 已采纳 2016-04-09 21:29:01

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-09 21:29:01

解决方案1
1 已采纳 2016-04-09 21:29:01