HTML表现为内联浮动左菜单

Question

我有一个简单的菜单系统，由无序列表组成。在此菜单下方，我想要正常显示内容。但无论我使用多少DIV，我想要显示的内容都会跟菜单项一起流动：

我的HTML看起来像这样：

<span class="a">Text</span>
<span class="b">Text</span>

我的样式就是这样：

<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>

小提琴：

https://jsfiddle.net/b8udxhdh/

如何阻止我的内容代码内联？

Answer 1

CSS clear property应该修复它。

我设法用

修复你的小提琴

#mainView { clear: both; }

Answer 2

你必须将#tabs ul作为块元素，它被视为内联元素。您可以通过在您的#tabs ul css选择器

上添加“display：block”属性来实现

Answer 3

将此添加到您的CSS文件中，我相信它会解决您的问题。

  #tabs li {
     /* float: left; */
    display: inline-block;
}