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

Question

我有以下布局：

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

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

Answer 1

工作 jsFiddle 演示

如果您可以更改一些标记，是的，您可以：

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 并中继 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

非常感谢大家！

这里有一些很好的答案。我需要一些比这里的一些解决方案更具防弹兼容性和“笨拙”的东西。

最后，我将 s 的大小设置ul为 100%，并li像这样调整 s 的大小：

li.left- 33.333333334%,text-align: left

li.right- 33.333333334%,text-align: right

li- 16.666666667%

在概念上并不那么漂亮，但相当防弹。