html - 将多个元素与父元素底部对齐
问题描述
我正在尝试将多个输入框对齐到父 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 上也能工作(我知道已经过时了),同时也在现代浏览器上工作。
谢谢你。
解决方案
一个简单的解决方案是添加一个br
如果你不想要复杂的 CSS 并确保它适用于死IE:
.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>
或者将 float 替换为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>
推荐阅读
- ios - 当已知数据和编码有效时,还有什么其他原因可能导致 NSString initWithData 返回 nil?
- python - __init__() 缺少 4 个必需的位置参数:
- python - 如何在没有会话的情况下保存 tensorflow ML 模型?
- javascript - Javascript 'OnClick' 和 HTML一起使用时不起作用
- javascript - 从文件加载组件模板
- r - 需要 MS R Server API 以 JSON 逐行格式返回数据帧,而不是逐列返回
- javascript - 无法捕获打字稿方法的结果
- typescript - Can't use function variable in TypeScript
- python - 使用beautifulsoup从一张桌子上抓取时出现网页抓取问题
- postgresql - 在 CTE 中使用 UPDATE 的 RETURNING 值进行更新,0 行受影响