テキストによる縦方向の移動

Question

テキストの横にテキストと線を含む縦方向のナビゲーションを作成したいのですが、ナビゲーションに少し問題があります。そのとき、私は水平線の隣にテキストを置いてナビゲーションリンクを作りました。テキストサイズは、行を右に押します。

body { 
 
    background-color: #663333; 
 
} 
 

 
#MainNavContainer { 
 
    height: 100%; 
 
} 
 

 
.MainNav { 
 
    list-style-type: none; 
 
    float: right; 
 
    line-height: 0 !important; 
 
} 
 

 
.MainNav li { 
 
    margin: 5px; 
 
} 
 

 
.MainNav li a { 
 
    display: inline-block; 
 
} 
 

 
.MainNav li a:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.MainNav li a span { 
 
    float: right; 
 
    display: inline-block; 
 
} 
 

 
.NavLine { 
 
    width: 40px; 
 
    height: 2px; 
 
    background-color: #FFFFFF; 
 
    position: relative; 
 
    clear: both; 
 
} 
 

 
.NavTxt { 
 
    position: relative; 
 
    font-family: Asap Condensed; 
 
    font-weight: lighter; 
 
    font-size: 14px; 
 
    color: #FFFFFF; 
 
    margin-right: 2px; 
 
    margin-top: 1px; 
 
}

<div id="MainNavContainer"> 
 
    <ul class="MainNav"> 
 
    <li> 
 
     <a href="#"> 
 
     <span class="NavLine"></span> 
 
     <span class="NavTxt">HOME</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <span class="NavLine"></span> 
 
     <span class="NavTxt">SERVICES</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

ここCodePenの抜粋です：

<https://codepen.io/ZedandWhite/pen/NaXqEL> 

この問題を解決するために私にいくつかのコードをお勧めしてください！

ありがとうございました。

Answer 1

シンプルなソリューション。 min-widthまたはwidthを.MainNav li aに設定して、目的の出力を得ることができます。以下のスニペットを確認してください。

body { 
 
    background-color: #663333; 
 
} 
 

 
#MainNavContainer { 
 
    height: 100%; 
 
} 
 

 
.MainNav { 
 
    list-style-type: none; 
 
    float: right; 
 
    line-height: 0 !important; 
 
} 
 

 
.MainNav li { 
 
    margin: 5px; 
 
} 
 

 
.MainNav li a { 
 
    display: inline-block; 
 
    min-width: 200px; 
 
} 
 

 
.MainNav li a:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.MainNav li a span { 
 
    float: right; 
 
    display: inline-block; 
 
} 
 

 
.NavLine { 
 
    width: 40px; 
 
    height: 2px; 
 
    background-color: #FFFFFF; 
 
    position: relative; 
 
    clear: both; 
 
} 
 

 
.NavTxt { 
 
    position: relative; 
 
    font-family: Asap Condensed; 
 
    font-weight: lighter; 
 
    font-size: 14px; 
 
    color: #FFFFFF; 
 
    margin-right: 2px; 
 
    margin-top: 1px; 
 
}

<div id="MainNavContainer"> 
 
    <ul class="MainNav"> 
 
    <li> 
 
     <a href="#"> 
 
     <span class="NavLine"></span> 
 
     <span class="NavTxt">HOME</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <span class="NavLine"></span> 
 
     <span class="NavTxt">SERVICES</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

フレックスボックスが使用可能な場合は、次の解決策で十分ですか？

.MainNav li a { 
    /* change the properties to the following instead of inline block */ 
    width: 100%; 
    display: flex; 
    flex-direction: row-reverse; 
    justify-content: flex-start; 
} 

body { 
 
    background-color: #663333; 
 
} 
 

 
#MainNavContainer { 
 
    height: 100%; 
 
} 
 

 
.MainNav { 
 
    list-style-type: none; 
 
    float: right; 
 
    line-height: 0 !important; 
 
} 
 

 
.MainNav li { 
 
    margin: 5px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.MainNav li a { 
 
    width: 100%; 
 
    //display: inline-block; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: flex-start; 
 
} 
 

 
.MainNav li a:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.MainNav li a span { 
 
    float: right; 
 
    display: inline-block; 
 
} 
 

 
.NavLine { 
 
    width: 40px; 
 
    height: 2px; 
 
    background-color: #FFFFFF; 
 
    position: relative; 
 
    clear: both; 
 
} 
 

 
.NavTxt { 
 
    position: relative; 
 
    font-family: Asap Condensed; 
 
    font-weight: lighter; 
 
    font-size: 14px; 
 
    color: #FFFFFF; 
 
    margin-right: 2px; 
 
    margin-top: 1px; 
 
}

<div id="MainNavContainer"> 
 
    <ul class="MainNav"> 
 
    <li> 
 
     <a href="#"> 
 
     <span class="NavLine"></span> 
 
     <span class="NavTxt">HOME</span> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <span class="NavLine"></span> 
 
     <span class="NavTxt">SERVICES</span> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>