對齊導航菜單

我正在嘗試爲正在處理的網站模板創建導航菜單。我想將左側的品牌名稱和右側的社交媒體字體真棒圖標放在一起，但是我的品牌名稱縮進，而右側的圖標正好是他們應該放在的位置。我如何讓他們甚至？對齊導航菜單

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>

或者你可以使用Flexbox的

#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正在尋找與＃＃元素對齊的幫助。 –

這就是我要找的東西，但我該如何設置1項左邊和右邊，而其他人都在中心？ – RogerFedFan

對齊導航菜單

回答

相關問題