如何使所有框(框类)具有相同的高度以便状态位于同一行?框内的文本需要垂直对齐。我需要这样的东西(不用担心箭头):
我需要支持 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>
最佳答案
添加最后三个属性:
.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;
}
关于html - 如何使一行文本的div和两个相同高度的div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38831505/