在 CSS 和 HTML 中使水平 'li' 具有相同的高度

Question

我正在尝试使用 2 个lis 创建ul，它们将被水平设置。下面是它现在的样子：

如您所见，左边的li 高度小于右边的高度。我希望左边的和右边的一样。我也在这个网站上使用Bootstrap。这是我的代码：

<ul class="thumbnails <?php echo $pageLang; ?>">
    <li class="span6" >
        <div class="commentsArea">
            <h3>dsfdsfd</h3>
            <p></p>
        </div>
    </li>
    <li class="span6 <?php echo $pageLang;?>">
        <label>Name</label>
        <input type="text" class="span6">
        <label>Description:</label>
        <textarea class="span6" rows="5" maxlength="450"></textarea>
        <button class="btn btn-success" value="button">
    </li>
</ul>

相关CSS：

.commentsArea {
    background-color: #D4E7ED;
    text-overflow: ellipsis;
    -webkit-border-radius: 10px 5px 5px 10px;
    border-radius: 10px 5px 5px 10px;
    -moz-border-radius: 10px 5px 5px 10px;
    padding: 5px;
}

我尝试将commentsArea 高度设置为 100%，但没有帮助。此外，如果我将左侧的li 高度设置为“硬编码”（例如，height=228px），它也可以正常工作。

有没有办法使 (1) 和 (2) 高度相同？

Answer 1

如果可以使用固定高度，添加下面的 CSS

.thumnails li {
    height: 228px;
}

或者任何需要的高度。

Answer 2

我建议您不要使用 ul 和 li 进行此类标记。使用divs 很容易完成。事实上，它看起来不像是正确使用列表。

<div class="thumbnails thumbnails-cont">
    <div class="span4 comments-cont">
        <div class="commentsArea">
            <h3>dsfdsfd</h3>
            <p></p>
        </div>
    </div>
    <div class="span4 offset4">
        <label>Name</label>
        <input type="text" class="span6">
        <label>Description:</label>
        <textarea class="span6" rows="5" maxlength="450"></textarea>
        <button class="btn btn-success" value="button">Test</button>
    </div>
</div>

CSS：

.thumbnails-cont {
    position: relative;
}
.comments-cont {
    position: absolute;
    top: 0;
    bottom: 0;
}

http://jsfiddle.net/n2VGS/