トップナビゲーションバーのタブ間に大きなスペースを作る方法は？

-2

まず、タブを分割し、トップナビゲーションバーのパネル全体に均等に分割するのは難しいです。ご覧のとおり、&nbspエンティティを使用することに頼っていましたが、これは私の意見では貧弱な解決策です。トップナビゲーションバーのタブ間に大きなスペースを作る方法は？

h1 { 
 
    color:#D68910; 
 
    font-family:'verdana'; 
 
    margin:25px; 
 
    margin-top:25px; 
 
} 
 

 
h6 { 
 
    color: #FFC300; 
 
    font-family:'verdana'; 
 
    margin: 38px; 
 
    margin-top: 15px; 
 
} 
 

 
.header { 
 
    padding: 15px; 
 
    background-color: #333; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    background-color: #454545; 
 
} 
 

 
.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    display: block; 
 
    padding: 14px 16px; 
 
    font-family:'verdana'; 
 
    font-size: 17px; 
 
    margin-right: 40px; 
 

 

 
    margin: 25px; 
 
    margin-top: 15px; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    color: gray; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #454545; 
 
    color: white; 
 
    padding: 2px 4px; 
 
    display: block; 
 
} 
 

 
.topnav a.active { 
 
    background-color: #4CAF50; 
 
    color: #D68910; 
 
} 
 

 
p { 
 

 
}

<!DOCTYPE html> 
 

 
<title>My Name</title> 
 
<br /> 
 
<br /> 
 
<br /> 
 

 
<div class="header" id="myHeader"> 
 
<h1>My Name</h1> 
 
<h6>Bioinformatician</h6> 
 
</div> 
 

 
<div class="topnav" id="myTopnav"> 
 
<li><a href="#home" style="text-decoration:none">Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
 
<li><a href="#news" style="text-decoration:none">Blog&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
 
<li><a href="#contact" style="text-decoration:none">About me&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
 
<li><a href="#about" style="text-decoration:none">Contact&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
 
</div> 
 

 

 
<body> </body>

出典

2017-09-21 Mr Keystrokes

質問をよくお尋ねください。 –

それを行うための最も簡単な方法は、justifiyアライメントを使用しています。私は、ディスプレイを使用して、フロートを削除しました：インラインブロックを、コメントを追加しました：擬似要素の後にキックする正当化するために必要なNAVの2行目（見えない）を引き起こすことが

h1 { 
 
    color:#D68910; 
 
    font-family:'verdana'; 
 
    margin:25px; 
 
    margin-top:25px; 
 
} 
 

 
h6 { 
 
    color: #FFC300; 
 
    font-family:'verdana'; 
 
    margin: 38px; 
 
    margin-top: 15px; 
 
} 
 

 
.header { 
 
    padding: 15px; 
 
    background-color: #333; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    background-color: #454545; 
 
} 
 

 
.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    display: block; 
 
    padding: 14px 16px; 
 
    font-family:'verdana'; 
 
    margin-right: 40px; 
 
    margin: 25px; 
 
    margin-top: 15px; 
 
    list-style:none; 
 
    text-align:justify; 
 
    font-size:0; 
 
} 
 
.topnav:after{ 
 
content:" "; 
 
width:100%; 
 
height:0; 
 
display:inline-block; 
 
line-height:0; 
 
} 
 

 
.topnav li { 
 
    display:inline-block; 
 
     font-size: 17px; 
 
} 
 
.topnav a { 
 
color: gray; 
 
} 
 
.topnav a:hover { 
 
    background-color: #454545; 
 
    color: white; 
 
    padding: 2px 4px; 
 
    display: block; 
 
} 
 

 
.topnav a.active { 
 
    background-color: #4CAF50; 
 
    color: #D68910; 
 
} 
 

 
p { 
 

 
}

<title>My Name</title> 
 
<br /> 
 
<br /> 
 
<br /> 
 

 
<div class="header" id="myHeader"> 
 
<h1>My Name</h1> 
 
<h6>Bioinformatician</h6> 
 
</div> 
 

 
<ul class="topnav" id="myTopnav"> 
 
<li><a href="#home" style="text-decoration:none">Home</a></li> 
 
<li><a href="#news" style="text-decoration:none">Blog</a></li> 
 
<li><a href="#contact" style="text-decoration:none">About me</a></li> 
 
<li><a href="#about" style="text-decoration:none">Contact</a></li> 
 
</ul>

出典

2017-09-21 06:22:59 Salketer

トップナビゲーションバーのタブ間に大きなスペースを作る方法は？

答えて

関連する問題