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

Question

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

我试图在选择“城市 (2)”后为整个里添加背景。

背景仅占纽约市 (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

您需要像 Eric 所说的那样清除 float 。实现这一点的最简单方法是将 overflow: hidden 应用于容器，因此:

.cityByLocation {
    overflow: hidden;
}

http://jsfiddle.net/a3GLG/