我有一些ul li高度问题 [英] i got some ul li height problems

问题描述

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

When inspecting my elements, i noticed my height on the first li is very low.

我试图添加一个背景， city（2）。

I'm trying to add a background to the whole li after selecting the "city (2)".

背景只填满城市（2）半个纽约。我试着没有浮动，但然后我不能得到他们排队。

The background fills only City(2) an half of New York. I tried without floating, but then i can't get them lined up.

我添加了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;
}

推荐答案

正如埃里克说的。最简单的方法是通过对容器应用 overflow：hidden ，所以：

You need to clear your floats as Eric said. The simplest way to achieve that is by applying overflow: hidden to the container, so:

.cityByLocation {
    overflow: hidden;
}

http://jsfiddle.net/a3GLG/

这篇关于我有一些ul li高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！