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

时间:2016-04-09 21:15:20

标签: javascript html css

如何在表单输入,标签,文本区域和从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>

1 个答案:

答案 0 :(得分: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)具有正确的行为。