HTML5：バーのストレッチを制御する方法は？テキスト間にスペースを増やす方法はありますか？

ul {padding: 16px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

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

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

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
<div style="text-align:right"> 
 
<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> 
 
</div> 
 
</body> 
 
</html>

を行います李のための幅properyをsetiing

出典

2017-12-22 08:05:02

あなたはそれらの間のスペースを作成するために、各リンクにマージンを追加することができます。また、ナビを伸ばしたい場合は、幅を100％に設定することもできます。

li a { 
display: block; 
color: white; 
text-align: center; 
padding: 16px; 
text-decoration: none; 
margin-right: 20px; 
} 

ul { 
padding: 16px; 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333333; 
width: 100%; 
}

出典

2017-12-22 08:02:16 Xoog

HTML5：バーのストレッチを制御する方法は？テキスト間にスペースを増やす方法はありますか？

答えて

関連する問題