0

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

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

列表设计示例

请记住，为了让代码正常工作，我暂时在 CSS 中用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;
}
4

3 回答 3

2

这是因为lis 正在失去他们的高度。浮动的孩子不会影响父母的身高。添加overflow: hidden到lis 以解决此问题。

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

小提琴

于 2012-06-14T19:59:09.813 回答
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; }），但有时我仍然这样做。我是说……不，我没有！！ho说我做到了？？诽谤！

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

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

于 2012-06-14T21:12:40.957 回答
0

尝试这样的事情：jsfiddle。可能是我的例子可以帮助你。如果你需要更多的东西问我。

于 2012-06-14T20:00:17.803 回答