html - このレイアウトは CSS で実現できますか?

Question

次のレイアウトを念頭に置いています。

は<header>1201 ピクセルです (画面サイズに応じて調整されます)。幅は<nav>100% です。<ul>も 100% 幅です (つまり、 の幅) <nav>。

1 つ<li>を常に ul の左端に配置し、2 つ<li>の s を中央に配置し、もう 1 つ<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

インラインブロック要素の動作でテキスト整列正当化とリレーを使用することもできます： 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%

概念的にはきれいではありませんが、かなり防弾です。