无法弄清楚如何使用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/

请提供'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

答

这还挺有很多你到了那里的CSS。（考虑使用你的单独边距值的速记？）两件事..

1）如果你的元素是内联块，那么你可以设置文本对齐的父母移动的东西左/中/右依据。

2）您的链接已经只是文本，所以有一个特定的原因，你为什么将它们设置为内联块而不是内联？并不是说它有什么大不了的。设置inline-block可以让你设置填充和增加可点击区域。

反正......这应该调整你的链接：

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

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

答

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

试试这个：

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

.nav li 
{ 
    display: table-cell; 
}

JSFiddle Demo

无法弄清楚如何使用CSS

相关推荐