無法弄清楚如何使用CSS

我試圖中心鏈接1，鏈接2，鏈接3在以下網頁居中在導航欄的多個鏈接：無法弄清楚如何使用CSS

http://i.imgur.com/qNimZCs.png?1

下面是相關HTML位：

<a class="logo" href="#"><p>Logo</p></a> 

<ul class="nav"> 
    <li><a class="link" href="#"><p>Link 1</p></a></li> 
    <li><a class="link" href="#"><p>Link 2</p></a></li> 
    <li><a class="link" href="#"><p>Link 3</p></a></li> 
</ul>

和這裏的CSS：

.link 
{ 
    font-size: 1em; 
    margin-left: 0; 
    margin-right: 0; 
    font-weight: none; 
    text-decoration: none; 
    color: #123456; 
    display: inline-block; 
    padding: 0 0; 

} 

.nav 
{ 
    margin-left: 0; 
    display: inline-block; 
    margin-bottom: 5px; 
    margin-top: 5px; 
} 

.nav li 
{ 
    display: inline-block; 
    margin: auto; 
}

我試過每一個C我能想到的事情的組合。

具體而言，我試圖將鏈接居中，使它們均勻地沿導航欄均勻分佈。有沒有人看到我在做什麼錯了？

編輯：

的jsfiddle鏈接：http://jsfiddle.net/B362m/

來源

2014-06-24 xcdemon05

請提供'jsfiddle' –

@DoanCuong http://jsfiddle.net/B362m/ - 如果沒有準備好，縮小結果窗口，直到它捕捉到移動設置 – xcdemon05

試試這個：

.nav 
{ 
    display: inline-block; 
    margin-left: 5%; 
    margin-bottom: 5px; 
    margin-top: 5px; 
    text-align: center; 
}

Working Fiddle

來源

2014-06-24 03:07:10 Jatin

這還挺有很多你到了那裏的CSS。（考慮使用你的單獨邊距值的速記？）兩件事..

1）如果你的元素是內聯塊，那麼你可以設置文本對齊的父母移動的東西左/中/右依據。

2）您的鏈接已經只是文本，所以有一個特定的原因，你爲什麼將它們設置爲內聯塊而不是內聯？並不是說它有什麼大不了的。設置inline-block可以讓你設置填充和增加可點擊區域。

反正......這應該調整你的鏈接：

.nav { 
    text-align: center; 
    display:block; 
} 

.link { 
    display: inline-block; 
    margin: 0 5px; 
    padding: 5px; 
}

來源

2014-06-24 03:13:05 relic

您還可以使用display:table和display:table-cell得到你要的樣子。

試試這個：

.nav 
{ 
    margin:auto; 
    width: 80%; 
    display:table; 
    padding:0; 
    text-align:center; 
} 

.nav li 
{ 
    display: table-cell; 
}

JSFiddle Demo

來源

2014-06-24 03:23:08

無法弄清楚如何使用CSS

回答

相關問題