センターを作成<ul><li></li></ul>タグ

Question

<div>タグにはどのようにリストを並べるのですか？以下は私が現在メニューに使用しているコーディングです。

HTML

<div> 
    <ul class="topnav" id="myTopnav"> 
     <li><a class="active" href="#home">HOME</a></li> 
     <li><a href="#news">NEWS</a></li> 
     <li><a href="#contact">CONTACT</a></li> 
    </ul> 
</div> 

CSS

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #0d47a1; 
    box-shadow: 0px 5px 10px #000; 
    position: absolute; 
    z-index: 10; 
    width: 100%; 
} 
ul.topnav li {float: left; zoom: 1;} 
ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 
    padding: 14px 40px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
    font-family: Calibri; 
} 
ul.topnav li a:hover {background-color: #1976d2;} 

Answer 1

はここで少し変わっCSSで、作業バージョンです。これは、設定された幅を使用していますが、それは動的サイズを使用しているのでほとんどの場合です。偉大な仕事

* { box-sizing: border-box;} 
 
div { 
 
    background-color: #0d47a1; 
 
    box-shadow: 0px 5px 10px #000; 
 
    position: absolute; 
 
    z-index: 10; 
 
    left: 0; 
 
    right: 0; 
 
    display: block; 
 
    } 
 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 25em; 
 
} 
 
ul.topnav li {display: inline-block;, text-align: center; min-width: 8em; } 
 
ul.topnav li a { 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 1em; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 1.2em; 
 
    font-family: Calibri; 
 
} 
 
ul.topnav li a:hover {background-color: #1976d2;}

<div> 
 
    <ul class="topnav" id="myTopnav"> 
 
     <li><a class="active" href="#home">HOME</a></li> 
 
     <li><a href="#news">NEWS</a></li> 
 
     <li><a href="#contact">CONTACT</a></li> 
 
    </ul> 
 
</div>