Question

我正在尝试为简单的html / css网站制作导航菜单，它使用块和无组织列表将项目添加到导航中。

问题在于我希望我的导航居中，现在它从左向右浮动，是否有另一种方法来对齐列出的div而不是使其向右浮动？我尝试使用左：20;但是没有用，这是代码。

正如我所说的那样，只需要稍稍向右移动，我将它向左浮动，以便它正确地组织列表，没有它，它是一个凌乱的列表，尝试它和你＆＃39;我明白我的意思...感谢您的帮助！：d

＆＃13;

body {  
 font-family: Arial;
}

#nav { /*indexed so I can see it over a content div.*/
 z-index:0; 
}

ul {
 margin: 0px;
 padding: 0px;
 list-style: none;
}

ul li {
 float: left; 
 width: 8%; 
 height: 40px; 
 background-color: #000000;
 opacity: 0.8; 
 line-height: 40px; 
 text-align: center; 
 font-size: 90%; 
}

ul li a {
 text-decoration: none; 
 color: white;
 display: block;
}

ul li a:hover {
 background-color: green;
}

ul li ul li{
 display: none;
}

ul li:hover ul li {
 display: block;
 margin-left: 0%;
 width: 100%;
 background-color: #000000;
}

＆＃13;

<div id="nav">
<ul>
    <li><a href="#">Attractions</a>
        <ul>
            <li><a href="">Our Team</a></li>
            <li><a href="">Camp Sites</a></li>
            <li><a href="">Mission &amp; Vision</a></li>
            <li><a href="">Resources</a></li>
        </ul>
    </li>
    <li><a href="#">Plan Visit</a>
        <ul>
            <li><a href="">Activities</a></li>
            <li><a href="">Parks</a></li>
            <li><a href="">Shops</a></li>
            <li><a href="">Events</a></li>
        </ul>
    </li>
    <li><a href="#">Birthdays</a>
        <ul>
            <li><a href="">Map</a></li>
            <li><a href="">Directions</a></li>
        </ul>
    </li>
</ul>
</div>

＆＃13;

Answer 1

我认为这给出了最好的结果：

#nav {
    left:40%
    position:relative;
}

使用float时，小心使用它而不使用clearfix hack。浮动可能最终会折叠您的整个网站。在此链接，也是一个解释：https://www.w3schools.com/howto/howto_css_clearfix.asp

css对齐列出的块

1 个答案: