将 div 放在新行上（由浮动 <ul> 元素引起的问题）

Posted 2023-03-06

【中文标题】将 div 放在新行上（由浮动 <ul> 元素引起的问题）

【英文标题】：Putting a div on a new line (problem caused by floating <ul> elements)

【发布时间】：2010-12-24 14:18:31

【问题描述】：

所以我有一个像这样的 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>

使用以下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;

但是当我放一个新的 div 时：

<div class="pleasedontfloat">The paganation would go here..</div>

它不是在列表下方，而是在它们旁边。我将如何解决这个问题？ （高兴的ontfloat 类没有应用任何规则）

【参考方案1】：

.pleasedontfloat  
    clear:both;
 

【讨论】：

非常感谢！这些天中的某一天，我将围绕这个被称为 css 的巫毒教。