如何在表单输入,标签,文本区域和从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>
答案 0 :(得分:1)
您只需使用CSS flexbox
即可解决。
display: flex
li
,每个flex-basis
一些label
(在这种情况下为25%
,并为每个输入添加一个类} em>(例如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
)具有正确的行为。