如何使一行文本和div與兩個相同的高度製作div？

Question

如何使所有箱子（箱子類）具有相同的高度，以便狀態處於同一行？框內的文字需要垂直對齊。我需要的是這樣的（不用擔心箭頭）：

我需要支持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>

Answer 1

添加最後三個屬性：

.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; 
} 

Answer 2

如果可以重新排列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; 
 
}

<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>