Question

尝试在页面顶部制作浮动菜单，但它不会居中。我使用了这里的代码：http://codepen.io/anon/pen/rxgoj 这是我的：http://codepen.io/anon/pen/BDpte

<body>
<div id="header">
</div>
<div id="content">
<div id="main">
</div>
</div>
<div class="navigation">
<div class="navigation.fixer">
<ul class="floating-elements">
<li class="floated"><a href="Home.html">Home</a></li>
<li class="floated"><a href="Joeys.html">Joeys</a></li>
<li class="floated"><a href="Cubs.html">Cubs</a></li>
<li class="floated"><a href="Scouts.html">Scouts</a></li>
<li class="floated"><a href="Venturers.html">Venturers</a></li>
<li class="floated"><a href="Rovers.html">Rovers</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
</div>
</body>

@charset "utf-8";

.navigation {
float:left;
position:relative;
left:50%;
/*overflow:hidden;*/
}

.navigation.fixer {
float:left;
position:relative;
left:-50%;
}

.floating-elements
{
list-style:none;
}

.floated
{
float:left; margin-right:10px;
}

非常感谢帮助.. :)

Answer 1

.navigation {
    position:relative;
    text-align:center;
}

.floated {
    display:inline-block;
    margin-right:10px;
}

http://jsfiddle.net/otbmtf13/

Answer 2

我在这里有解决方案：http://codepen.io/anon/pen/tJaHy

对于包含句点'。'的类名的元素。在它们中，你应该在指定css句柄的同时逃避句号

.navigation\.fixer{
.....
}

否则常规css处理意味着类型为“.navigation.fixer”的字符串是具有不同类名“navigation”和“fixer”的元素，这不是这里的情况，因为它是单个类名。

无法将浮动菜单放到中心位置

2 个答案: