Question

我尝试将菜单设置为使其上方的水平线具有相同的宽度，就像在此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>

Answer 1

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

＆＃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;

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

1 个答案: