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

Posted 2023-03-06

【中文标题】在 CSS 和 HTML 中使水平 \'li\' 具有相同的高度

【英文标题】：Make horizontal 'li' the same height in CSS and HTML在 CSS 和 HTML 中使水平 'li' 具有相同的高度

【发布时间】：2013-03-21 16:56:20

【问题描述】：

我正在尝试使用 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) 高度相同？

【问题讨论】：

你试过 .span6height: 100%; 吗？

我试过了：<li class="span6" style="height: 100%"> 还是不行。

您是否尝试过在ul 周围放置一个包含div 的内容？

试过了，没用

【参考方案1】：

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

.thumnails li 
    height: 228px;

或者任何需要的高度。

【参考方案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/

【讨论】：

因为我使用的是引导带，所以您提供的解决方案会弄乱我的页面。谢谢您的帮助。我希望 ul 和 li 标签仍然可以实现。

这很奇怪。无论如何，您仍然可以以相同的方式使用 ul 和 li：jsfiddle.net/n2VGS/1

现在它正在相互重叠

我想我只是用 javascript 和 Jquery 添加高度。

现在它正在相互叠加。因为 left li 是绝对定位的。你需要为右边的li设置一个margin-left。