如何让所有盒子(盒子类)的高度相同,以便状态在同一行?框内的文本需要垂直对齐。我需要这样的东西(不要担心箭头):
我需要支持IE10。我有这样的html和CSS:
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
}
.box {
white-space: pre;
text-align: center;
display: block;
border: 1px solid black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 200px;
padding: 10px 0;
}
<ul>
<li>
<span class="box">Get parent
folder owner</span>
<span class="status">PASSED</span>
</li>
<li>
<span class="box">Some text</span>
<span class="status">PASSED</span>
</li>
<li>
<span class="box">Some text</span>
<span class="status">RUNNING</span>
</li>
</ul>
答案 0 :(得分:2)
添加最后三个属性:
.box {
white-space: pre;
text-align: center;
display: block;
border: 1px solid black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 200px;
padding: 9px 0;
/*add the lines below:*/
display: table-cell;
height: 70px;
vertical-align: middle;
}
答案 1 :(得分:1)
如果您可以重新排列HTML,解决方案是使用表结构。
.thetable {
display: table;
border-spacing: 10px 0;
}
.boxrow, .statusrow {
list-style: none;
padding: 0;
margin: 0;
display: table-row;
}
.boxrow li {
display: table-cell;
vertical-align: middle;
white-space: pre;
text-align: center;
border: 1px solid black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 200px;
padding: 10px 0;
}
.statusrow li {
display: table-cell;
vertical-align: middle;
text-align: center;
}
&#13;
<div class="thetable">
<ul class="boxrow">
<li>Get parent
folder owner</li>
<li>Some text</li>
<li>Some text</li>
</ul>
<ul class="statusrow">
<li>PASSED</li>
<li>PASSED</li>
<li>RUNNING</li>
</ul>
</div>
&#13;