这个布局可以用CSS实现吗？

Question

我有以下布局：

<header>为1201像素（根据屏幕尺寸调整）; <nav>是100％宽; <ul>也是100％宽（因此，<nav>的宽度）;

我希望一个<li>始终与ul的左边缘对齐， 两个<li>位于中心，一个<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;   
}

Answer 2

要进行跨浏览器投诉，请适当地提供课程：

<ul>
    <li>First</li>
    <li class="SecondChild">Second</li>
    <li class="ThirdChild">Third</li>
    <li>Fourth</li>
</ul>

然后添加您的类CSS：

ul {
    font-size:0;
}

li {
    display:inline-block;
    width:16.66666666666666666666667%;
    font-size:1rem;
}

.SecondChild {
    margin-left:16.66666666666666666666667%;
}

.ThirdChild {
    margin-right:16.66666666666666666666667%;
}

好的电话@ReneGeuze，不需要额外的非语义标记。

Answer 3

你也可以使用text-align justify和relay inline-block元素的行为： http://codepen.io/gcyrillus/full/GcBxA

ul {
  padding:0;
  margin:0;
  line-height:0;
  text-align:justify ;
  border:1px solid;
  height:1.65em;
  background:#333;
}
li {
  line-height:1.5em;
  display:inline-block;
  border:1px solid;
  background:yellow;
  width: 10%;
  text-align:center;
  font-weight:bold;
  vertical-align:top;}
ul:after {
  content:'';
  width:90%;
  display:inline-block;
}

<ul>
  <li>II</li>
  <li>II</li><li>II</li>
  <li>II</li>
</ul>

Answer 4

非常感谢大家！

这里有一些很棒的答案。我需要一些防弹兼容性方面的东西，而且比这里的一些解决方案有点“笨拙”。

最后，我调整ul的大小为100％，并调整li的大小如下：

li.left - 33.333333334％，text-align: left

li.right - 33.333333334％，text-align: right

li - 16.666666667％

不是在概念上相当漂亮，但相当防弹。