Question

我试图让这个ul内的li伸展到ul的宽度。我想将整个ul移到左边，所以它触及了div类的header-title。我希望菜单中的导航链接位于底部，而不是顶部 - ＆＃34; vertical-align：bottom;＆＃34;不起作用。

我似乎无法弄明白。

HTML-

    <!-- Begin >> Container -->
    <div class="container">

        <div class="header-photo">
            <img src="img/alan-headshot-round.jpg" />
        </div>
        <div class="header-title font-title">
            <span style="color: #ffcc00;">A</span>M
        </div>

        <div id="menu">
            <ul>
                <li><a href="index.html">BOOKS</a></li>
                <li><a href="blog.html">BLOG</a></li>
                <li><a href="services.html">SERVICES</a></li>
                <li><a href="about.html">ABOUT ME</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </div>

    </div>
    <!-- End >> Container -->

</div>
<!-- End >> Wrapper -->

CSS -

body {
    background-color: #3e4648;
    color:#ffffff;
    font-family: Calibri;
    font-size: 14px;
    font-weight: bold;
    margin:0;
    padding: 0;
    text-align: center; /* For IE6 purposes to fix bug */ 
}

div.wrapper {
    margin: 0 auto;
    position: relative;
    width: 800px;
}

div.container {
    height: 25px;
    left: 0px;
    position: relative;
    top: 35px;
    width: 800px;
}


/* BEGIN TITLE */

div.font-title {
    color: #ffffff;
    font-family: Calibri;
    font-size: 36px;
    font-weight: bold;
}

div.header-photo {
    background-color: #1c3641;
    height: 72px;
    width: 100px;
    vertical-align: center;
    text-align: left;
    position: absolute;
    padding-left: 20px;
}

div.header-title {
    background-color: #1c3641;
    height:60px;
    width: 240px;
    left: 92px;
    position: absolute;
    padding-top: 12px;
}

/* END TITLE */

/* BEGIN NAVIGATION */

#menu {
    font-family: calibri;
    font-size: 14px;
    font-weight: bold;
    height: 72px;
    width: 450px;
    background-color: #2e2f30;
    text-align: center;
    left: 330px;
    position: absolute;
    border: 1px solid #fff;
}

#menu ul {
    display: block;
    float: left;
    height: 72px;
    width: 410px;
    margin: 0px;
    list-style-type: none;
    border: 1px dotted green;
}

#menu li {
    display: block;
    float: left;
    height: 72px;
    background-color: #2e2f30;
    display: inline;
    width: 80px;
}

#menu li:hover {
    background-color: #353a3c;
}

#menu a {
    color: #fff;
    text-decoration: none;
}

#menu a:hover{
    text-decoration: none;
}

Answer 1

删除ul的填充和li的边距（如果有的话）。

ul {
   padding: 0;
}
ul  li {
   margin: 0;
}

Answer 2

没有代码就很难回答，但默认情况下，li通过USER-AGENT-STYLESHEET（浏览器默认值）添加了一个margin-left。如果您希望它们从左侧开始对齐，请通过更改该边距手动删除它。或者你可以使用像normalize.css这样的附加样式表。

此外，如果您希望元素为父元素的宽度，请将显示更改为内联块和宽度为100％。

如果您想了解更多信息，我建议您查看有关如何使用CSS的基础知识的netTuts或css-tricks。

祝你好运。

使列表项在无序列表中扩展到100％

2 个答案: