<hr>の作成方法横のメニューと同じ幅ですか？

私はこの上の水平線を同じ幅にするために、このBlue Noteウェブサイトのようにメニューのスタイルを設定しようとしています。私は右にスケールすることができないようです、私はの質問は似ているが、それは私を助けていないことがわかりました。私はたくさんのことを試して、実際に助けを感謝することができた、私はBlaskan themeとワードプレスを使用しています。どちらか（あなたのメニューへのborder-topのCSSプロパティを追加し、代わりにHR要素を使用しての<hr>の作成方法横のメニューと同じ幅ですか？

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

出典

2017-12-23 Mirza Sisic

以下の例のようにLI要素上：ここFiddleと関連HTMLとCSSです、または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>

出典

2017-12-23 15:19:49

私に正しい方向に向いてくれてありがとう！ –

<hr>の作成方法横のメニューと同じ幅ですか？

答えて

関連する問題