1行のテキストでdivを作成し、同じ高さで2 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

は最後の3つのプロパティを追加します。

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