如何使<hr />与水平菜单相同的宽度?

时间:2017-12-23 15:05:10

标签: css

我尝试将菜单设置为使其上方的水平线具有相同的宽度,就像在此Blue Note网站上一样。 enter image description here我似乎无法正确扩展,我发现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>

1 个答案:

答案 0 :(得分:2)

不使用HR元素,而是在菜单中添加border-top CSS属性 (在LI元素上,如下面的例子,或在UL元素上)

&#13;
&#13;
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;
&#13;
&#13;