は、並べ替えられた順序付けられていないリストを水平に表示します。

Question

私は順序付けされていないリストをネストしています。 これはCurrenly、それは別のラインの最初のリンクに

を示しているが、私はとして表示する
enter code hereJSFiddle link リンクです：あなたは、リンクと同じにしたい場合は ホームニュースお問い合わせについて

Answer 1

..前にある2番目のulタグを削除するだけです。

希望すると、これが役立ちます。

Answer 2

表示をインラインブロックli aに設定する必要があります。これは水平に積み重ねることができます。あなたの問題への答えは、（水平/垂直）要素がスタイルdisplay: flexを持っている場合、あなたはその中の各項目の方向を定義することができ、フレキシボックスであるため使用にfloat:right;

Answer 3

を逆にする

li a { 
    display: inline-block; 
    color: white; 
    text-align: left; 
    padding: 16px; 
    text-decoration: none; 
} 

.tryこの：

.main_menu { 
 
\t \t display: flex; 
 
\t \t flex-direction: row; 
 
\t \t width: 100%; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
    display: inline-block; 
 
\t \t display: flex; 
 
\t \t flex-direction: row; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: left; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
}

<ul > 
 
    <li class="main_menu"><a href="#home">Home</a> 
 
    <ul> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><a href="#about">About</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

This linkフレックスボックスについてたくさん説明します。

希望します。