gpt4 book ai didi

html - 从左到右居中对齐 float 导航栏和下拉菜单

转载 作者:行者123 更新时间:2023-11-28 09:33:58 24 4
gpt4 key购买 nike

我想将导航栏中的内容居中对齐(这样 img 就是导航栏的中心。我知道我有 float: left; 但如果我不这样做,(左边的东西,右边的东西)将会掉落向下到 img 的底部边缘。所以我想要的是保持向左浮动,但能够显示:内联 block ,或类似的东西。我还希望(左边的东西)的下拉栏从 img 开始左侧,然后向右侧扩展。
demo fiddle

HTML

  <div id="nav">
<div id="container">
<ul>
<li>
<a href="#"> Left thing </a>

<ul>
<li><a href="#"><----- want it to go this way</a>
</li>
<li><a href="#">i want this to start under left thing</a>
</li>
</ul>
</li>
<li>
<img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="height:70px" />
</li>
<li>
<a href="#"> Right thing </a>

<ul>
<li><a href="#">This starts right</a>
</li>
<li><a href="#">And this is right</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

CSS

* {
padding: 0;
margin: 0;
}
#body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 17px;
}
#nav {
background-color: 72776A;
width: 100%;
position:fixed;
height:50px;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
display:block;
}
#nav ul li {
float:left;
}
#container {
text-align:;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: ACD661;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position:absolute;
color: red;
border: 1px solid black;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}

最佳答案

替换

#container {
width: 270px;
margin: 0px auto;
}

检查 this fiddle

关于html - 从左到右居中对齐 float 导航栏和下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25617699/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com