由于一些奇怪的原因,我的text-align: center;
无效。这很奇怪'因为它是HTML和开发人员最基本的事情,所以我有点尴尬......我必须做一些可怕的错误并且不要看到我的错误。 text-align
选项甚至没有显示在Firebug中。
有人可以帮助我吗?
HTML:
<div id="main-menu">
<ul id="main-menu-links" class="links clearfix">
<li class="menu-286 first active">
<a class="active" title="" href="/dashboard">Dashboard</a>
</li>
<li class="menu-194">
<a href="Organisation">Organisation</a>
</li>
</ul>
</div>
CSS:(我已尝试在每个选择器中放置text-align: center
,但没有结果......)
div#main-menu {
background-color: #c4d82d;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
div#main-menu ul {
padding: 0px;
}
div#main-menu li{
border-right: 1px solid #86a43f;
width: 186px;
}
div#main-menu li.last{
border: none;
}
div#main-menu a, div#main-menu a.active {
background: none;
text-shadow: none;
}
div#main-menu a:hover {
background: none;
font-style: italic;
}
答案 0 :(得分:3)
当我将<ul>...</ul>
元素包装在<div id="main-menu">
中时,它按预期工作:
http://jsfiddle.net/6bBK5/
确保使用正确的选择器。 ID区分大小写,选择器中的空格很重要。
答案 1 :(得分:1)
<div>
<span>
<ul>
<li>Here is the centered Title!</li>
</ul>
</span>
</div>
CSS
ul {text-align: center;}
li {display:inline; padding:0 10px 0 0}
答案 2 :(得分:0)
所以,正在努力:
div#main-menu li{
border-right: 1px solid #86a43f;
width: 186px;
text-align:center;
}