无法在 div 中居中导航
Posted
技术标签:
【中文标题】无法在 div 中居中导航【英文标题】：Can't center navigation in div 【发布时间】：2014-06-23 19:26:34 【问题描述】：您好，我正在开发一个响应式网站。现在我的导航有问题，我无法在我的 div 中居中。我的下拉菜单也有问题，当我的导航开始适合 div 时会破坏 otder。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test</title>
</head>
<body>
<div id="body_wrapper">
<div id="header_wrapper" class="clearfix">
<div id="header_content" class="content_container">
<div id="language_wrapper">
<div class="language active">
<span>Deutsch</span>
</div>
<div class="language">
<a href="#">
<span>Englisch</span>
</a>
</div>
</div>
<div id="hLogo_wrapper">
<a href="#">
<img src="images/starbucks.png">
</a>
</div>
</div>
</div>
<div id="inner_content" class="content_container">
<div class="mainMenu clearfix" >
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">Aktuelles</a></li>
<li>
<a href="#">Speisekarte ￬</a>
<ul class="hidden">
<li><a href="#">Mittagstisch</a></li>
<li><a href="#">Frühstück</a></li>
</ul>
</li>
<li><a href="#">Reservierung</a></li>
<li><a href="#">Gallerie</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
</div>
<div id="footer_wrapper"></div>
</div>
</body>
</html>
这是我目前的css文件
*
margin: 0;
padding: 0;
font-family: Trebuchet MS;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
img border: 0;
.clearfix:after
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
.content_container
margin: 0 auto;
width: 62.5%;
#inner_content
#header_wrapper
height: 220px;
background: url('images/header.png');
#hLogo_wrapper img
max-width: 100%;
#language_wrapper
float: right;
#language_wrapper .language
display: inline;
#hLogo_wrapper
float: left;
.mainMenu
height: 60px;
margin: 0 auto;
.mainMenu ul
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 10%;
.mainMenu li
display:inline;
float: left;
margin-right: 1px;
.mainMenu li a
display:inline-block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
.mainMenu li:hover a
background: #19c589;
.mainMenu li:hover ul a
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
z-index: 120;
/*Hover state for dropdown links*/
.mainMenu li:hover ul a:hover
background: #19c589;
color: #fff;
.mainMenu li ul
display: none;
.mainMenu li ul li
display: block;
float: none;
.mainMenu li ul li a
width: auto;
min-width: 140px;
padding: 0 20px;
.mainMenu ul li a:hover + .hidden, .hidden:hover
display: block;
【问题讨论】：
欢迎来到 SO。 当我的导航开始适合 div 时销毁 otder 是什么意思。..？你可以说得更详细点吗..？如果可能，请添加一个简单的演示，例如 jsfiddle 或图像..？ 【参考方案1】：您在菜单 ul 上留下了 10% 的标记，这导致您的下拉内容偏离中心。
.mainMenu ul
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 10%;
向左更改为 0；会解决这个问题。
.mainMenu ul
position: relative;
list-style-type:none;
margin:0;
padding:0;
left: 0;
【讨论】：
以上是关于无法在 div 中居中导航的主要内容，如果未能解决你的问题，请参考以下文章