CSS-帮助设置菜单项的样式

Question

CODE

<div class="navheader">
     <ul class="navuseraccess">
        <li><a runat="server" id="mnuAccount" href="AccountSettings.aspx">My Account</a></li>
     </ul>
</div>

CSS

div.navheader {
    overflow: hidden;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 775px;
    height: 43px;
    margin: 0;
    padding: 0 20px 0px 20px;
    list-style-type: none;
    background-image: url(../images/header_bkg_navmain.jpg);
    background-repeat: no-repeat;
}

ul.navuseraccess {
    float: right;
    height: 43px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.navuseraccess li {
    float: left;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 13px;
    line-height: 43px;
}
.navuseraccess li a {
    display: block;
    height: 43px;
    color: #fff;
    margin: 0;
    padding: 0 8px;
    text-decoration: none;
    line-height: 43px;
}

What I'm trying to do is add a new listitem-anchor but want it to display beneath the existing one, and not next to it. So I'm guessing I'm going to have to move the existing one up a bit, then add a new one beneath it.

Answer 1

You don't need to float the elements. They are already shrink-wrapped because they are contained within a position: absolute element. This element will grow as needed, anchored to the bottom right of the page so long as you remove the height and width properties.

See it in action: http://jsfiddle.net/MJrfX/