我在设计表单时遇到问题。标记为目标组的部分我无法使其垂直对齐。请参阅下面的屏幕截图。我添加了颜色边框来帮助调试 css。
我为此创建了一个js fiddle http://jsfiddle.net/uuNTC/
下面是代码的精简版本
HTML
<ul id="ulFilterList">
<li>
<div class="filterLabel" id="labelDates">Dates</div>
<input type="text" value="03/09/2012" name="dateFrom" id="dateFrom" class="dateInputs">
<input type="text" value="09/09/2012" name="dateTo" id="dateTo" class="dateInputs">
</li>
<li>
<div class="filterLabel" id="labelOnRequest">Include "On Request" With:</div>
<select name="onRequest" id="onRequest">
<option selected="selected" value="1">Stop Sell</option>
<option value="2">Available</option>
</select>
</li>
<li>
<div class="filterLabel" id="labelDestinationGroups">Destination Group:</div>
<select size="10" multiple="multiple" name="destinationGroups[]" id="destinationGroups">
<option value="Tunisia All">Tunisia All</option>
<option value="Turkey All">Turkey All</option>
<option value="Turkey PNR">Turkey PNR</option>
<option value="UAE Abu Dhabi ">UAE Abu Dhabi </option>
<option value="UAE All Dubai">UAE All Dubai</option>
<option value="VIE">VIE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
<option value="VIE">MORE</option>
</select>
</li>
</ul>
CSS
ul#ulFilterList,
ul#ulFilterList li { margin: 0px; padding: 0px }
.dateInputs { margin:0px; text-align:left; width: 50px; display: inline-block; }
#ulFilterList { width: 100% }
ul#ulFilterList li
{
list-style:none;
margin-bottom: 5px;
border: solid 1px blue;
}
.filterLabel {
font-weight: normal;
width: 29%;
display: inline-block;
text-align:right;
height: 100%;
font-size: 11px ;
margin-top: auto
}
最佳答案
使用 display: inline-block;
的好处之一是您可以指定垂直对齐方式。在 this fiddle我已将 .filterLabel
元素的垂直对齐设置为 vertical-align: top;
。不利的一面是,对于单行输入旁边的标签(“日期”和“包含‘根据请求’使用“标签),或将相应的 INPUT
元素的样式稍微向上。
关于css - 表单样式垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12298523/