我正在尝试将多个输入框对齐到父div的底部。例如:
.inner-container {
margin-right: 10px;
float: left;
}
<div class="outer-container">
<div class="inner-container">
<label>Test</label><br />
<input type="text" placeholder="something here" />
</div>
<div class="inner-container">
<label>Test</label><br />
<input type="text" placeholder="something here" />
</div>
<div class="inner-container">
<input type="text" placeholder="something here" />
</div>
</div>
我也试图让这个也适用于IE11(我知道已过时),同时也在使用现代浏览器。
谢谢。
答案 0 :(得分:1)
如果您不想要复杂的CSS并且确保它适用于 dead IE,那么一个简单的解决方案是添加br
:
.inner-container {
margin-right: 10px;
float: left;
}
<div class="outer-container">
<div class="inner-container">
<label>Test</label><br >
<input type="text" placeholder="something here" >
</div>
<div class="inner-container">
<label>Test</label><br >
<input type="text" placeholder="something here" >
</div>
<div class="inner-container">
<br>
<input type="text" placeholder="something here" >
</div>
</div>
或者用inline-block
替换浮动并保留默认vertical-align
:
.inner-container {
margin-right: 10px;
display:inline-block;
}
<div class="outer-container">
<div class="inner-container">
<label>Test</label><br >
<input type="text" placeholder="something here" >
</div>
<div class="inner-container">
<label>Test</label><br >
<input type="text" placeholder="something here" >
</div>
<div class="inner-container">
<input type="text" placeholder="something here" >
</div>
</div>