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

Question

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

如您所见，左侧的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

我建议你不要使用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/

Answer 2

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

.thumnails li {
    height: 228px;
}

或者任何需要的高度。