2

<ul>6つのアイテムを持つシングルを使用して、2列のナビゲーションバーを作成しようとしてい<li>ます:

<nav>
    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Team</li>    
    <li>Store</li>
    <li>Blog</li>
    <li>Contact</li>
    </ul>
</nav>​

片側に 3 つのエレメント、反対側に 3 つのエレメント。縦に並べました。

現時点では、2 つの別個<ul>の要素を作成し、それらの間にパディング/マージンを配置するのは簡単です: http://jsfiddle.net/Baumr/SJcjN/ — しかし、それは優れた解決策ではありません。

<span>3 つの の各セットをタグで囲むこともできます<li>が、それが唯一の CSS ソリューションですか?

エレガントなアイデアを探しています。ありがとうございました！

4

2 に答える 2

7 
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Team</li>    
  <li>Store</li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

CSS：

li {
  width: 50%;
  float: left;
  padding: 5px 0; 
}

彼らはそのように注文します：

Home About
Team Store
Blog Contact

それが問題ではない場合は、非常に簡単な解決策があります。

編集：

li:nth-child(even) {
  width: 50%;
  float: right; 
}
li:nth-child(odd) {
  width: 50%;
  float: left;
}

これにより、正しい方法でそれらが並べ替えられます。IEがどのように動作するかはわかりませんが、他のすべてのブラウザで機能します。

または、概念に厳密に従うことができるUL-LIので、HTMLは次のようになり、必要な数の列を持つことができます。

<nav>
    <ul class="menuitem">
       <li class="column">
          <ul>               
            <li>Home</li>
            <li>About</li>
            <li>Team</li>
          </ul>
        </li>
        <li class="column">
          <ul>               
             <li>Store</li>
             <li>Blog</li>
             <li>Contact</li>
          </ul>
        </li>               
    </ul>

    <ul class="menuitem">
        <li class="column">
          .....
        </li>
    </ul>      

</nav>

正しくフォーマットされたhtmlを作成すると、作業が楽になります。

于 2012-10-27T22:52:29.977 に答える
-1

<span>'sを使用することが、最もクロスブラウザに適したソリューションになると思います。

誰かが他のアイデアを持っていない限り？悲しいことにIEはサポートしていないので、クロスブラウザ互換のものを探していnth-child(N)ます。

これは、これらのランダムなスパンで、私が望んでいたほどクリーンではありません（HTMLに関して）が、HTMLは次のとおりです。

<nav>
<ul>
<span>
<li>Home</li>
<li>About</li>
<li>Team</li>
</span><span>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</span>
</ul>
</nav>

span（私の本の中のul—大きな偽物に注意してください。）

そしてCSS：

nav span {
    width: 50%;
    float: left;
}

しかし、それはほとんど良い解決策ではありません...他のアイデアはありますか？

于 2012-10-27T23:47:09.220 に答える