ナビメニューの整列

私が取り組んでいるウェブサイトテンプレートのナビゲーションメニューを作成しようとしています。右のアイコンはインデントされているが、右のアイコンはインデントされているが、私はブランド名を左に、ソーシャルメディアのフォントは素晴らしいアイコンにしたい。どうすればそれらを均等にするのですか？ナビメニューの整列

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<title>Assignment</title> 
<!--Bootstrap For Cleaner Viewability--> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|PT+Sans" rel="stylesheet"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="minimal.css"> 
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type='text/css'> 
</head> 

<body> 

<div class="container"> 
<div align="center"> 

<ul id="nav"> 

<a href="#" id="home">MINIMAL</a> <!--This is the one--> 

<a href="#"><li>Home</li></a> 
<a href="#"><li>Shop</li></a> 
<a href="#"><li>Contact</li></a> 
<a href="#"><li>Shop Men</li></a> 
<a href="#"><li>Shop Women</li></a> 

<a href="#" id="test">MINIMAL</a> 

</ul> 
</div> 
</div>

CSS：このようなメニュー項目の

#home { 
float: left; 
padding-top: 15px; 
font-size: 30px; 
font-family: 'PT Sans', sans-serif; 
color: #545456; 
text-decoration: none; 
} 

#test { 
float: right; 
padding-top: 15px; 
font-size: 30px;`enter code here` 
font-family: 'PT Sans', sans-serif; 
color: #545456; 
text-decoration: none; 
}

出典

2017-03-03 RogerFedFan

こんにちはガブリエル、あなたは私たちが問題の[MCVE]を持っている必要があり、コードのすべてを与えていますか？レイアウトは右のようには見えません。「右のアイコンはどこにあるべきか」 - どのようなアイコンですか？あなたのHTMLも無効です - 'a'は' ul'の直接の子ではありません –

'＃home'は' ul'要素のデフォルトCSSのために字下げされています - あなたはブラウザ開発ツールを使ってあなたのページを調べることを検討するべきですあなたのレイアウトに何が影響しているかを見てください。 – chazsolo

すみません。私の画面上では全く違って見える。すべてのスクリプトとリンクを含める必要がありますか？ – RogerFedFan

まず、li要素は、リンクをラップする必要があります。

#home, #test { 
 
    padding-top: 15px; 
 
    font-size: 30px; 
 
    font-family: 'PT Sans', sans-serif; 
 
    color: #545456; 
 
    text-decoration: none; 
 
} 
 

 
#nav { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
#nav li { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 

 
#nav li:first-child { 
 
    float: left; 
 
} 
 

 
#nav li:last-child { 
 
    float: right; 
 
}

<div class="container"> 
 
<div align="center"> 
 

 
<ul id="nav"> 
 

 
<li><a href="#" id="home">MINIMAL</a></li> <!--This is the one--> 
 

 
<li><a href="#">Home</a></li> 
 
<li><a href="#">Shop</a></li> 
 
<li><a href="#">Contact</a></li> 
 
<li><a href="#">Shop Men</a></li> 
 
<li><a href="#">Shop Women</a></li> 
 

 
<li><a href="#" id="test">MINIMAL</a></li> 
 

 
</ul> 
 
</div> 
 
</div>

それとも、フレキシボックス

を使用することができます。

左右に1つずつ取得するには、そのように浮動でそれを行うことができます

#home, #test { 
 
    padding-top: 15px; 
 
    font-size: 30px; 
 
    font-family: 'PT Sans', sans-serif; 
 
    color: #545456; 
 
    text-decoration: none; 
 
} 
 

 
#nav { 
 
    list-style: none; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 
#nav li { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 

 
#nav li:first-child { 
 
    margin-right: auto; 
 
} 
 

 
#nav li:last-child { 
 
    margin-left: auto; 
 
}

<div class="container"> 
 
<div align="center"> 
 

 
<ul id="nav"> 
 

 
<li><a href="#" id="home">MINIMAL</a></li> <!--This is the one--> 
 

 
<li><a href="#">Home</a></li> 
 
<li><a href="#">Shop</a></li> 
 
<li><a href="#">Contact</a></li> 
 
<li><a href="#">Shop Men</a></li> 
 
<li><a href="#">Shop Women</a></li> 
 

 
<li><a href="#" id="test">MINIMAL</a></li> 
 

 
</ul> 
 
</div> 
 
</div>

出典

2017-03-03 18:14:15 pol

ありがとう！これは私の問題を解決しました。 – RogerFedFan

使用李： fiddle

<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>

出典

2017-03-03 17:53:26 fernando

これは問題の一部に過ぎず、OPは '＃home'要素。 –

これは私が探しているものですが、他の人がセンターにいる間、左に、右に1アイテムをセットする方法はありますか？ – RogerFedFan

答えて

関連する問題