水平スクロール（モバイル）メニューバーの作成方法は？

Question

私はコーディングに多くのスキルがありません。だから私はCSSとHTMLでGoogleのこのメニューバーのようにする方法を知っているのが好きですか？ Click here to see sample image of Google menu bar

参考：これは同じですか？私はあなたのナビゲーションバーを表現するために、それの内部に要素をdiv要素を使用することはありません

<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px"> 
 
    menu1 | menu2 | menu3 | menu4 | menu5 | menu6 | menu7 | menu8 
 
</div>

Answer 1

。 div内のそのテキストは何も意味しません。 <a>タグを使用するようにしたい。このようなより多くのものを試してみてください。

nav { 
 
    display: flex; 
 
    padding: 10px; 
 
    border: 1px solid #000; 
 
    min-width: 300px; 
 
    overflow: auto; 
 
} 
 

 
a { 
 
    margin-right: 14px; 
 
    position: relative; 
 
    text-decoration: none; 
 
} 
 

 
a:not(:last-of-type):after { 
 
    content: ''; 
 
    display: block; 
 
    height: 14px; 
 
    width: 1px; 
 
    margin: auto; 
 
    background-color: #000; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: -7px; 
 
}

<nav> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    <a href="#">Link 4</a> 
 
    <a href="#">Link 5</a> 
 
    <a href="#">Link 6</a> 
 
</nav>