我尝试将菜单设置为使其上方的水平线具有相同的宽度,就像在此Blue Note网站上一样。 我似乎无法正确扩展,我发现this问题类似,但对我没有帮助。我已经尝试了很多东西,非常感谢一些帮助,我使用WordPress和Blaskan theme。这是Fiddle以及相关的HTML和CSS:
[i for i in lst if not i.isspace()]
<nav id="NAV_1">
<button id="BUTTON_2">
Menu
</button>
<div id="DIV_3">
<h6 id="H6_4">
READING JAZZ - LISTENING TO LITERATURE
</h6><hr id="HR_5" />
</div>
<div id="DIV_6">
<ul id="UL_7">
<li id="LI_8">
<a href="http://localhost/BlueQuote/blog/" id="A_9">News</a>
</li>
<li id="LI_10">
<a href="http://localhost/BlueQuote/" id="A_11">Home</a>
</li>
<li id="LI_12">
<a href="http://localhost/BlueQuote/about/" id="A_13">About</a>
</li>
<li id="LI_14">
<a href="http://localhost/BlueQuote/contact/" id="A_15">Contact</a>
</li>
<li id="LI_16">
<a href="http://localhost/BlueQuote/jazz/" id="A_17">Jazz</a>
</li>
<li id="LI_18">
<a href="http://localhost/BlueQuote/literature/" id="A_19">Literature</a>
</li>
<li id="LI_20">
<a href="http://localhost/BlueQuote/test-3/" id="A_21">Test</a>
</li>
<li id="LI_22">
<a href="http://localhost/BlueQuote/new/" id="A_23">New</a>
</li>
</ul>
</div>
答案 0 :(得分:2)
不使用HR元素,而是在菜单中添加border-top CSS属性 (在LI元素上,如下面的例子,或在UL元素上)
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
border-top: 2px solid red;
float: left;
padding: 10px 5px;
background:#eee;
}
&#13;
<div>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
</ul>
</div>
&#13;