我有一些高度问题

Question

在检查我的元素时，我发现第一个li的高度非常低。

在选择“city（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%;
}

source

Answer 3

您还可以通过将overflow: hidden设置为li元素来解决此问题。它将清除并自动计算高度。

- 更新 -

感谢@mickmackusa

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