我有一个由无序列表组成的简单菜单系统。在这个菜单下面我想正常显示内容。然而,无论我使用多少 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/
如何防止我的内容代码以内联方式运行?
最佳答案
关于HTML 行为与 float 左侧菜单内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48512887/