Question

我是一个崭露头角的网页设计师，并不总是难以将我的设计实现到代码中，但是今天当我在网站上工作时，我遇到了一个问题。我试图在<li>列表元素中嵌套两个div。我希望有一个跨越<li>元素和float: left;的全高，而另一个div包含两行文本，我希望它float: right;。我认为我想要做的事情相当简单，但出于某种原因，我真的很想让它正常工作。我基本上只是制作日历事件列表，最终我将使用PHP从Google日历中提取数据并重新填充您在下面看到的示例信息。

我正试图让列表看起来像这样：

list design example http://i47.tinypic.com/21n1no8.jpg

请注意，为了让代码正常运行，我暂时用 Arial Black 和 Arial 替换了我的Google Webfont。 Arial Black 应该用于.day类字体， Arial 应该用于.info类字体（又名时间和地点行））。

非常感谢任何帮助！谢谢！

HTML：

<ul class="gcal">
    <li>
        <div class="gcal-event">
            <div class="day">
                6.07
            </div>
            <div class="info">
                <span class="time">8pm-10:30pm</span><br />
                    456 Fake Ln. Blvd., New York, NY
            </div>
        </div>
    </li>
    <li>
        <div class="gcal-event">
            <div class="day">
                7.12
            </div>
            <div class="info">
                <span class="time">6pm-7pm</span><br />
                    123 Fake Ln., Chicago, IL
            </div>
        </div>
    </li>
</ul>

CSS：

ul.gcal {
    list-style: none;
    padding: 0 0 0 15px;
}

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
}

.gcal-event {
}

.day {
    float: left;
    width: 150px;
    text-align: right;
    padding: 7px 0 0 0;
    font-family: 'Arial Black', sans-serif;
    font-size: 48px;
    line-height: 0.6em;
}

.info {
    float: right;
    width: 640px;
    text-align: left;
    padding: 0 0 0 10px;
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    line-height: 1em;
}

.info span.time {
    font-weight: bold;
}

Answer 1

这是因为li正在失去他们的身高。漂浮的孩子对父母的身高没有贡献。将overflow: hidden添加到li以解决此问题。

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
    overflow: hidden;
}

Fiddle

Answer 2

未浮动的元素中的浮动元素会导致问题。我发现在尝试找出正在发生的事情时，为代码添加背景颜色或边框会有所帮助。如果您为所有元素添加背景颜色，您会看到<li>缺失。为了帮助您的浏览器确定包含元素的位置，您需要将其与浮点数组合在一起。你有几个选择，

ul.gcal li {
    padding: 0 0 0 50px;
    display: block;
    background-color: red;
    float: left;
}

或在浮动内容的底部添加一个清除，如此

<li>
    <div class="gcal-event">
        <div class="day">
            7.12
        </div>
        <div class="info">
            <span class="time">6pm-7pm</span><br />
                123 Fake Ln., Chicago, IL
        </div>
    </div>
    <br clear="all">
</li>

不再鼓励clear="all"属性（相反，我们应该在下一个元素.clear { clear:both; }上使用明确的类）但我有时仍会这样做。我的意思是......不，我没有！我说我做了？诽谤！

这是一个小提琴http://jsfiddle.net/WkBgg/

我注意到的另一件事是具有硬编码宽度的float:right;。根据浏览器的大小（如移动浏览器），这将导致与其上方的内容进行一些奇怪的对齐。你可能想重新思考如何调整这两者。在小提琴中，如果你缩小窗口小于640px，你会明白我的意思。

Answer 3

尝试类似的事情：jsfiddle。可能是我的榜样帮助你。如果你需要更多的东西问我。

试图在无序列表中浮动div

非常感谢任何帮助！谢谢！

3 个答案: