Html 将 div 放在新行上(由浮动 <ul> 元素引起的问题)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1869785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:30:30 来源:igfitidea点击:
Putting a div on a new line (problem caused by floating <ul> elements)
提问by Christopher Tarquini
So I have a 3 unordered lists like so:
所以我有一个 3 个无序列表,如下所示:
<ul class="menu">
<li class="heading">Title (Click To Download)</li>
<li><a title="Download sample.mp3" href="http://example.com/sample.mp3">Sample Song</a></li>
</ul>
With the following css style:
使用以下 css 样式:
/* SITE MAP MENUS */
ul.menu {
float: left;
margin: 0 10px 0 10px;
display: block;
font-size: 13px;
line-height: 24px;
color: #898989;
}
ul.menu li {}
.menuText
{
}
li.heading {
color: #493f0b;
font-weight: bold;
border-bottom: 1px solid #d7d7d7;
}
However when I put a new div:
但是,当我放置一个新的 div 时:
<div class="pleasedontfloat">The paganation would go here..</div>
Instead of going below the lists it goes next to them. How would I fix this? (the class pleasedontfloat has no rules applied to it)
它不是在列表下方,而是在它们旁边。我将如何解决这个问题?(类 happyontfloat 没有适用于它的规则)
回答by jball
.pleasedontfloat {
clear:both;
}