题
在那里的CSS大师出局,我无法弄清楚使得第一个标签/选择对而不中间对齐的CSS,但第二个在中间保持一致。
查看下面的图像中的问题。我的目标是使第一个标签/选择对align在中间对齐,了解使其发生的CSS规则。
<div class="pure">
<form class="pure-form-inline">
<div class="pure-g">
<div class="pure-u labelArea">
<label>Choose Project:</label>
</div>
<div class="pure-u-1-4">
<select></select>
</div>
</div>
<div class="pure-control-group">
<label>Choose Customer:</label>
<select></select>
</div>
</form>
</div>
.
在这里,您可以在操作中看到此操作... fiddle
解决方案
一种简单的方法是给出
label
元素的线路高度等于下拉阵选择器的高度。但是,此解决方案仅取决于您的标签仅是单行文本,如果您有任何多线的标签,它将不起作用,并且您应该使用上面详述的vertical-align
方法。
label {
line-height:25px;
}
.
其他提示
label, select {
display: inline-block;
vertical-align: middle;
}
. You have additional div
s around the first label
/select
pair, which force this behaviour.
If you remove the unnecessary div
s around the first label
/select
pair and add the same class as in the second, you should be fine
<div class="pure">
<form class="pure-form-inline">
<div class="pure-control-group">
<label>Choose Project:</label>
<select></select>
</div>
<div class="pure-control-group">
<label>Choose Customer:</label>
<select></select>
</div>
</form>
</div>
Modified JSFiddle
Try with this vertical align fix:
/* Vertical Align Fix */
.valign:before {
content:"";
height:100%;
display:inline-block;
vertical-align:middle;
}
.valign > * {
display: inline-block;
}
.valign-m { vertical-align: middle; }
Give the class (.valign) to the parent (The div containing the select)
And this other class to the inner elements (select + label)
See if it works.
.pure .pure-u {
line-height:25px;
}
不隶属于 StackOverflow