ナビゲーションリンク間の間隔

Question

私の問題は、ナビゲーションリンク間にスペースを入れたいということです。私はインターネットで検索しましたが、私が得るのはスペースを減らすことだけです。 具体的には、黒い枠線で囲まれた各ナビゲーションリンクの間にスペースを入れたいと思います。

これはナビゲーションバーのコードです。私は本当に助けに感謝します。ありがとうございました。

ul { 
 
    list-style-type: none; 
 
    position: fixed; 
 
    margin-top: 50px; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #fff; 
 
    border: 5px solid #000; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; \t 
 
    text-decoration: none; 
 
} 
 

 
li { 
 
    text-align: center; 
 
    border-bottom: 5px solid #000; 
 
} 
 

 
li:last-child { 
 
    border-bottom: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

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

Answer 1

ない..あなたが達成したいが、私はあなたがリンクの下にそれをしたい場合は、リンク間の線は、これはまた、あなたを助けるかもしれない理解わから

ul { 
 
    list-style-type: none; 
 
    position: fixed; 
 
    margin-top: 50px; 
 
    padding: 0; 
 
    width: 400px; 
 
    background-color: #fff; 
 
    border: 5px solid #000;} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none;} 
 
li { 
 
    text-align: center; 
 
    float: left; 
 
    border-right:solid 1px black; 
 
} 
 

 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

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

Answer 2

余白を追加するには余白を使用する必要がありますが、枠線には小文字が必要ですE微調整、ここで

ul { 
    list-style-type: none; 
    position: fixed; 
    margin-top: 50px; 
    padding: 0; 
    width: 200px; 
    background-color: #fff; 
    /*border: 5px solid #000; moved to LI element*/ 
} 

li a { 
    display: block; 
    color: #000; 
    padding: 8px 16px; 
    text-decoration: none; 
    margin-bottom:10px; /*add some margin to create the white space*/ 
    border: 5px solid #000; /*add the border to each LI element rather than UL*/ 
} 
li { 
    text-align: center; 
    /*border-bottom: 5px solid #000; remove this bottom border as handled in LI css*/ 
} 

Answer 3

それは下のコメントを参照してください：

<style> 
ul { 
    list-style-type: none; 
    position: fixed; 
    margin-top: 50px; 
    padding: 0; 
    width: 200px; 
    } 

li a { 
    display: block; 
    color: #000; 
    padding: 8px 16px; 
    text-decoration: none; 
    border: 5px solid #000; 
    background-color: #fff; 
    } 
li { 
    text-align: center; 
    margin-bottom:10px; 
} 
li:last-child { 
    margin-bottom:0; 
} 

li a:hover { 
    background-color: #555; 
    color: white; 
} 
</style> 



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

デモ： margin`は何のためにあるのか `だhttps://jsfiddle.net/4fLbx4xa/

Answer 4

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

      <style> 
      ul { 
       list-style-type: none; 
       position: fixed; 
       margin-top: 50px; 
       padding: 0; 
       width: 200px; 
       background-color: #fff; 
       } 

      li{ 
       width:100%; 
       display: block; 
       margin-top:10px; //this is the height you want 
       border: 5px solid #000; 
       color: #000; 
       background:#000; 
       padding:10px 0; 
       } 
      li a { 
       text-align: center; 
       padding: 8px 16px; 
       text-decoration: none; 
       color:#fff; 
      } 

      li:first-child { 
       margin-top:0; 
      } 

      li:hover { 
       background-color: #555; 
       color: white; 
      } 
    </style>