html - 我有一些 ul li 身高问题

Question

在检查我的元素时，我注意到我在第一个 li 的高度非常低。

选择“城市（2）”后，我试图为整个 li 添加背景。

背景仅填满了纽约市 (2) 的一半。我试过不浮动，但后来我无法让它们排成一行。

我添加了 2 张照片。一个我有浮动，一个没有。

<ul class="specs">
        <li>
            <div class="trigger">› City (2)</div>
            <div class="cityByLocation">
                <ul>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › New York
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › Chicago
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                </ul>
            </div>
        </li>
<ul>

CSS：

.cityName{
    float: left;
    width: 45%;
}


.cityDistance {
    float: left;
    width: 20%;
}

.specs {

    padding: 0;
}

.specs li {
    padding: 0;
    padding-top: 10px;

    list-style: none;
}

.specs ul {
    list-style: none;
    padding: 0;
}

Answer 1

正如埃里克所说，你需要清理你的花车。实现这一目标的最简单方法是应用于overflow: hidden容器，因此：

.cityByLocation {
    overflow: hidden;
}

http://jsfiddle.net/a3GLG/

Answer 2

我认为这将解决您的问题。

当浮动元素位于容器框内时会出现问题，该元素不会自动强制容器的高度调整为浮动元素。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。

您可以使用 2 种方法来修复它：

{clear:both} 或 .clearfix

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

资源

Answer 3

您也可以通过设置overflow: hidden为li元素来修复它。它将清除并自动计算高度。

- 更新 -

谢谢@mickmackusa

https://jsfiddle.net/e94pzbbn/1/