为什么我不能把导航杆对准中心？
为什么我不能把导航杆对准中心？
提问于 2015-06-10 18:18:54
我正在使用jQuery创建一个下拉导航菜单，它运行良好，但我无法使它在我的页面中心。
我试过在div“菜单”中使用align="center“，但这不起作用。然后，我尝试使用css对div、lis和uls进行对齐，但这也不起作用。
这是我的密码
jQuery：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function () {
$("#menu li").hover(function () {
$(this).children(":hidden").slideDown();
}, function(){
$(this).parent().find("ul").slideUp();
});
});
</script>HTML：
<div id="menu">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">test</a>
<ul>
<li><a href="#">drop1</a></li>
<li><a href="#">drop2</a></li>
<li><a href="#">drop3</a></li>
</ul>
</li>
<li><a href="#">test</a>
<ul>
<li><a href="#">drop1</a></li>
<li><a href="#">drop2</a></li>
</ul>
</li>
</ul>
</div>CSS：
#menu {
height: 30px;
background-color: #26C7FF;
margin-left: 0;
margin-right: 0;
}
#menu li li:hover {
background-color: yellow;
cursor: pointer;
}
#menu ul, #menu li {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
width: 120px;
list-style-type: none;
line-height: 30px;
text-align: center;
}
#menu li ul {
position: absolute;
background-color: #26C7FF;
display: none;
}
#menu li li {
float: none;
padding: 2px;
}
#menu a {
color: #000;
text-decoration: none;
}回答 4
Stack Overflow用户
回答已采纳
发布于 2015-06-10 18:29:16
使用display:内联块；而不是浮动li元素，然后对容器ul使用文本对齐:center；。
#menu > ul > li {
display: inline-block;
}下面是一个有用的示例：http://codepen.io/taneleero/pen/MwojLV
Stack Overflow用户
发布于 2015-06-10 18:24:31
将其包装在一个具有任意宽度的max-width的容器中：
.container {
max-width: 600px; // Or whatever
width: 100%;
margin: 0 auto;
}
#menu {
height: 30px;
background: #26C7FF;
}<div class="container">
<div id="menu">
</div>
Stack Overflow用户
发布于 2015-06-10 18:29:39
请检查这段代码。我想这就是你想要的。
< script type = "text/javascript" >
$(document).ready(function() {
$("#menu li").hover(function() {
$(this).children(":hidden").slideDown();
}, function() {
$(this).parent().find("ul").slideUp();
});
}); < /script>#menu {
height: 30px;
background-color: #26C7FF;
margin-left: 0;
margin-right: 0;
}
#menu li li:hover {
background-color: yellow;
cursor: pointer;
}
#menu ul,
#menu li {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
position: relative;
}
#menu li {
float: none;
width: 120px;
list-style-type: none;
line-height: 30px;
text-align: center;
display: inline-block;
}
#menu li ul {
position: absolute;
background-color: #26C7FF;
display: none;
left: 0;
right: 0;
}
#menu li li {
float: none;
padding: 2px;
}
#menu a {
color: #000;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="menu">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">test</a>
<ul>
<li><a href="#">drop1</a>
</li>
<li><a href="#">drop2</a>
</li>
<li><a href="#">drop3</a>
</li>
</ul>
</li>
<li><a href="#">test</a>
<ul>
<li><a href="#">drop1</a>
</li>
<li><a href="#">drop2</a>
</li>
</ul>
</li>
</ul>
</div>
这是JSFIDDLE链接
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30764289
复制相关文章
相似问题
腾讯云开发者
