css - 如何使 与水平菜单宽度相同？

Question

我正在尝试设置菜单样式，使其上方的水平线具有相同的宽度，例如 Blue Note网站。 我似乎无法正确缩放它，我发现 this问题很相似，但对我没有帮助。我已经尝试了很多东西，真的很感激一些帮助，我正在使用 WordPress 和 Blaskan theme .这是 Fiddle以及相关的 HTML 和 CSS:

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

    #NAV_1 {
    box-sizing: border-box;
    color: rgb(137, 137, 137);
    height: 227.538px;
    overflow-wrap: break-word;
    text-align: justify;
    text-decoration: none solid rgb(137, 137, 137);
    text-size-adjust: 100%;
    width: 750px;
    word-wrap: break-word;
    column-rule-color: rgb(137, 137, 137);
    perspective-origin: 375px 113.762px;
    transform-origin: 375px 113.762px;
    caret-color: rgb(137, 137, 137);
    border: 0px none rgb(137, 137, 137);
    font: normal normal 400 normal 14px / 25.9px Verdana;
    margin: 0px 101.8px;
    outline: rgb(137, 137, 137) none 0px;
    padding: 0px 15px;
}/*#NAV_1*/

#NAV_1:after {
    box-sizing: border-box;
    clear: both;
    color: rgb(137, 137, 137);
    content: '"' '"';
    display: table;
    height: 0px;
    overflow-wrap: break-word;
    text-align: justify;
    text-decoration: none solid rgb(137, 137, 137);
    text-size-adjust: 100%;
    width: 0px;
    word-wrap: break-word;
    column-rule-color: rgb(137, 137, 137);
    perspective-origin: 0px 0px;
    transform-origin: 0px 0px;
    caret-color: rgb(137, 137, 137);
    border: 0px none rgb(137, 137, 137);
    font: normal normal 400 normal 14px / 25.9px Verdana;
    outline: rgb(137, 137, 137) none 0px;
}/*#NAV_1:after*/

#NAV_1:before {
    box-sizing: border-box;
    color: rgb(137, 137, 137);
    content: '"' '"';
    display: table;
    height: 0px;
    overflow-wrap: break-word;
    text-align: justify;
    text-decoration: none solid rgb(137, 137, 137);
    text-size-adjust: 100%;
    width: 0px;
    word-wrap: break-word;
    column-rule-color: rgb(137, 137, 137);
    perspective-origin: 0px 0px;
    transform-origin: 0px 0px;
    caret-color: rgb(137, 137, 137);
    border: 0px none rgb(137, 137, 137);
    font: normal normal 400 normal 14px / 25.9px Verdana;
    outline: rgb(137, 137, 137) none 0px;
}/*#NAV_1:before*/

#BUTTON_2 {
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    display: none;
    height: auto;
    overflow-wrap: break-word;
    text-decoration: none solid rgba(0, 0, 0, 0.8);
    text-size-adjust: 100%;
    width: auto;
    word-wrap: break-word;
    column-rule-color: rgba(0, 0, 0, 0.8);
    perspective-origin: 50% 50%;
    transform-origin: 50% 50%;
    caret-color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgba(0, 0, 0, 0.8);
    font: normal normal 400 normal 20px / 20px "Source Sans Pro", sans-serif;
    margin: 0px auto;
    outline: rgba(0, 0, 0, 0.8) none 0px;
    padding: 20px 0px;
}/*#BUTTON_2*/

#BUTTON_2:after {
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.8);
    content: '""';
    cursor: pointer;
    overflow-wrap: break-word;
    text-decoration: none solid rgba(0, 0, 0, 0.8);
    text-size-adjust: 100%;
    word-wrap: break-word;
    column-rule-color: rgba(0, 0, 0, 0.8);
    caret-color: rgba(0, 0, 0, 0.8);
    border: 0px none rgba(0, 0, 0, 0.8);
    font: normal normal 400 normal 20px / 20px FontAwesome;
    outline: rgba(0, 0, 0, 0.8) none 0px;
    padding: 0px 0px 0px 20px;
}/*#BUTTON_2:after*/

#DIV_3 {
    box-sizing: border-box;
    color: rgb(137, 137, 137);
    height: 28.4px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(137, 137, 137);
    text-size-adjust: 100%;
    width: 720px;
    word-wrap: break-word;
    column-rule-color: rgb(137, 137, 137);
    perspective-origin: 360px 14.2px;
    transform-origin: 360px 14.2px;
    caret-color: rgb(137, 137, 137);
    border: 0px none rgb(137, 137, 137);
    font: normal normal 400 normal 14px / 25.9px Verdana;
    outline: rgb(137, 137, 137) none 0px;
}/*#DIV_3*/

#H6_4 {
    box-sizing: border-box;
    clear: both;
    color: rgb(51, 51, 51);
    height: 22.4px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    width: 720px;
    word-wrap: break-word;
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 360px 11.2px;
    transform-origin: 360px 11.2px;
    caret-color: rgb(51, 51, 51);
    border: 0px none rgb(51, 51, 51);
    font: normal normal 400 normal 18px / 22.5px "Droid Serif", serif;
    margin: 41.94px 0px -4px;
    outline: rgb(51, 51, 51) none 0px;
}/*#H6_4*/

#HR_5 {
    color: rgb(137, 137, 137);
    height: 3px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(137, 137, 137);
    text-size-adjust: 100%;
    width: 720px;
    word-wrap: break-word;
    column-rule-color: rgb(137, 137, 137);
    perspective-origin: 279.2px 0.5px;
    transform-origin: 279.2px 0.5px;
    caret-color: rgb(137, 137, 137);
    background: rgb(25, 23, 98) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(0, 0, 0);
    font: normal normal 400 normal 13px / 16.003px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 7px 0px 16px;
    outline: rgb(137, 137, 137) none 0px;
}/*#HR_5*/

#DIV_6 {
    box-sizing: border-box;
    color: rgb(137, 137, 137);
    height: 171.2px;
    overflow-wrap: break-word;
    text-align: justify;
    text-decoration: none solid rgb(137, 137, 137);
    text-size-adjust: 100%;
    width: 720px;
    word-wrap: break-word;
    column-rule-color: rgb(137, 137, 137);
    perspective-origin: 360px 85.6px;
    transform-origin: 360px 85.6px;
    caret-color: rgb(137, 137, 137);
    border: 0px none rgb(137, 137, 137);
    font: normal normal 400 normal 14px / 25.9px Verdana;
    margin: -30px 0px 0px;
    outline: rgb(137, 137, 137) none 0px;
}/*#DIV_6*/

#UL_7 {
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    height: 171.2px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 720px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 360px 85.6px;
    transform-origin: 360px 85.6px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    margin: 0px;
    outline: rgb(25, 23, 98) none 0px;
    padding: 0px;
}/*#UL_7*/

#LI_8, #LI_10 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: inline-block;
    height: 85.6px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    top: 0px;
    width: 87px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 43.5px 42.8px;
    transform-origin: 43.5px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 0px 45px 0px 0px;
}/*#LI_8, #LI_10*/

#A_9, #A_11 {
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: block;
    height: 85.6px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 42px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 21px 42.8px;
    transform-origin: 21px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 30px 0px;
}/*#A_9, #A_11*/

#LI_12 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: inline-block;
    height: 85.6px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    top: 0px;
    width: 93.2375px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 46.6125px 42.8px;
    transform-origin: 46.6125px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 0px 45px 0px 0px;
}/*#LI_12*/

#A_13 {
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: block;
    height: 85.6px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 48.2375px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 24.1125px 42.8px;
    transform-origin: 24.1125px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 30px 0px;
}/*#A_13*/

#LI_14 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: inline-block;
    height: 85.6px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    top: 0px;
    width: 111.625px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 55.8125px 42.8px;
    transform-origin: 55.8125px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 0px 45px 0px 0px;
}/*#LI_14*/

#A_15 {
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: block;
    height: 85.6px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 66.625px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 33.3125px 42.8px;
    transform-origin: 33.3125px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 30px 0px;
}/*#A_15*/

#LI_16 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: inline-block;
    height: 85.6px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    top: 0px;
    width: 78.45px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 39.225px 42.8px;
    transform-origin: 39.225px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 0px 45px 0px 0px;
}/*#LI_16*/

#A_17 {
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: block;
    height: 85.6px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 33.45px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 16.725px 42.8px;
    transform-origin: 16.725px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 30px 0px;
}/*#A_17*/

#LI_18 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: inline-block;
    height: 85.6px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    top: 0px;
    width: 131.087px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 65.5375px 42.8px;
    transform-origin: 65.5375px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 0px 45px 0px 0px;
}/*#LI_18*/

#A_19 {
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: block;
    height: 85.6px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 86.0875px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 43.0375px 42.8px;
    transform-origin: 43.0375px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 30px 0px;
}/*#A_19*/

#LI_20 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: inline-block;
    height: 85.6px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    top: 0px;
    width: 80.7875px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 40.3875px 42.8px;
    transform-origin: 40.3875px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 0px 45px 0px 0px;
}/*#LI_20*/

#A_21 {
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: block;
    height: 85.6px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 35.7875px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 17.8875px 42.8px;
    transform-origin: 17.8875px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 30px 0px;
}/*#A_21*/

#LI_22 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: inline-block;
    height: 85.6px;
    left: 0px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    top: 0px;
    width: 32.6625px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 16.325px 42.8px;
    transform-origin: 16.325px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
}/*#LI_22*/

#A_23 {
    box-sizing: border-box;
    color: rgb(25, 23, 98);
    display: block;
    height: 85.6px;
    overflow-wrap: break-word;
    text-align: center;
    text-decoration: none solid rgb(25, 23, 98);
    text-size-adjust: 100%;
    text-transform: uppercase;
    width: 32.6625px;
    word-wrap: break-word;
    column-rule-color: rgb(25, 23, 98);
    perspective-origin: 16.325px 42.8px;
    transform-origin: 16.325px 42.8px;
    caret-color: rgb(25, 23, 98);
    border: 0px none rgb(25, 23, 98);
    font: normal normal 400 normal 14px / 25.9px Helvetica;
    list-style: none outside none;
    outline: rgb(25, 23, 98) none 0px;
    padding: 30px 0px;
}/*#A_23*/

Answer 1

不使用 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;
}

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