HTML 行为与 float 左侧菜单内联

Question

我有一个由无序列表组成的简单菜单系统。在这个菜单下面我想正常显示内容。然而，无论我使用多少 DIV，我想要显示的内容都会随着菜单项一起流动，如下所示:

我的 HTML 看起来像这样:

<div>
  <div id="tabs">
    <div>
      <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
      </ul>
    </div>
  </div>
  <div>

    <div>
      <pre><span style="font-size: 11px">
asdf asfd asfd asdf asdf
asdf asdf asdf asdf asdf
asdf asdf asdf asdf asdf
asdf asdf asfd asdf asdf
asfd asdf asfd

</span></pre>
    </div>
  </div>

</div>

我是这样设计的:

#tabs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
#tabs li {
  float: left;
  border: 1px solid #000;
  border-bottom-width: 0;
  margin: 3px 3px 0px 3px;
  padding: 5px 5px 0px 5px;
  background-color: #CCC;
  color: #696969;
}

fiddle :

https://jsfiddle.net/b8udxhdh/

如何防止我的内容代码以内联方式运行？

Answer 1

CSS clear property应该修复它。

我设法用

修复了你的 fiddle

#mainView { clear: both; }