Question

我遇到了问题......我正在为某人建立一个网站，而且我一直坚持使用菜单。我希望它们处于水平行，所以在我的CSS中我这样做：

.kop {
    font-family: 'Ballpark';
    font-size:45px;
    color:#222;
    text-shadow: 0px 2px 3px #555;
    float: left;
    text-align:center;
    margin: 0 10px;

}

.menu {
    margin:0 auto;
    text-align: center;
}

这是我的HTML：

<div id="menu">
    <p class="kop">About Us</p>
    <p class="kop">Services</p>
    <p class="kop">Projects</p>
    <p class="kop">Partners</p>
    <p class="kop">Contact Us</p>
</div>

它仍然将左边的所有内容对齐......

有没有人有答案？

jsfiddle

莉莎。

Answer 1

首先，你应该更正CSS，你要在课程上设置样式＆＃34;菜单＆＃34;但它在您的HTML中设置为ID，因此它应该是#menu而不是.menu。

其次，您应该在菜单项上使用display:inline-block而不是将其向左浮动，这样您就可以将#menu与text-align:center;对齐。请参阅以下演示：

<强> FIDDLE

CSS：

.kop {
    font-family: 'Ballpark';
    font-size:45px;
    color:#222;
    text-shadow: 0px 2px 3px #555;
    display:inline-block;
    text-align:center;
    margin: 0 10px;

}
#menu {
    margin:0 auto;
    text-align: center;
}

Answer 2

对于菜单栏恕我直言，人们应该使用CSS样式为display: inline-block;的无序列表，因为它可以相对轻松地实现您想要的效果。

display: inline-block;但是，它适用于任何元素组，因此如果您将它添加到当前CSS中，只要您摆脱浮动，它仍将以您希望的方式显示。

工作小提琴：http://jsfiddle.net/gJR84/3/

HTML

<ul id="menu">
    <li class="kop"> About Us </li>
    <li class="kop"> Services </li>
    <li class="kop"> Projects </li>
    <li class="kop"> Partners </li>
    <li class="kop"> Contact Us </li>
</ul>

CSS

.kop {
    font-family: 'Ballpark';
    font-size:45px;
    color:#222;
    text-shadow: 0px 2px 3px #555;
    text-align:center;
    margin: 0 10px;
    list-style: none;
    display: inline-block;
}
#menu {
    margin:0 auto;
    text-align: center;
}

Answer 3

您有一个菜单ID而不是一个类。要将id添加到id，请执行以下操作：

#menu {
    margin:0 auto;
    text-align: center;
}

主题标签表示id，而句点表示类

Answer 4

您的.kop元素会向左浮动，因此它们永远不会位于中间。尝试：

.kop {
  font-family: 'Ballpark';
  font-size:45px;
  color:#222;
  text-shadow: 0px 2px 3px #555;
  margin: 0 10px;
  display: inline-block;
}

已经使用浮动中心文本？

4 个答案:

HTML

CSS