html - 这种布局可以用CSS来实现吗？

Question

我有以下布局:

<header>为 1201px(根据屏幕尺寸调整)；<nav>是 100% 宽；<ul>也是 100% 宽(所以，<nav> 的宽度)；

我想要一个 <li>始终与 ul 的左边缘对齐，两个 <li> s 在中心，一个 <li>始终与 <ul> 的右边缘对齐.这是可能的吗？

Answer 1

Working jsFiddle Demo

如果您可以稍微更改标记，是的，您可以:

HTML

<div id="nav">
    <div class="left">
        <ul>
            <li class="left">Left</li>
            <li class="right">Center</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li class="left">Center</li>
            <li class="right">Right</li>
        </ul>
    </div>    
</div>

CSS

#nav {
    width: 600px;
    overflow: hidden;
    background: yellow;
    margin: 0 auto;
}

#nav > .left {
    width: 50%;
    float: left;
}

#nav > .right {
    width: 50%;
    float: right;
}

#nav ul {
    margin: 0;
    padding: 0;
}

#nav li {
    list-style-type: none;
    background: orange;
}

#nav li.left {
    float: left;
}

#nav li.right {
    float: right;   
}