1

メニューがあり、4 つのメニュー ポイントがあり、それらを 2x2 の正方形に配置したいと考えています。最初の2つのクラスと他のクラスのクラスを持たずにそれを行う方法はありますか?

助けてくれてありがとう:)

更新: もう少しいじって、フレックス ボックス構造を使用しています。この情報を投稿できなくて申し訳ありません:

  ul {
  -webkit-box-orient: horizontal;
  }

  ul li {
    -webkit-box-flex: 1;
    height: 44%;
    margin: 3%;
  }
4

2 に答える 2

2

もちろん。1 つには、フローティングを使用して、それに応じて幅を設定できます。以下の例を参照するか、ライブの例についてはhttp://jsfiddle.net/BUPX7/を参照してください。

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

ul {
    width: 200px;
}

ul li {
    width: 100px;   
    margin: 0;
    padding: 0;   
    float: left;
}
于 2012-11-24T22:24:38.900 に答える
1

divデフォルトでは、要素間に改行があります。それをオーバーライドするために何らかのCSSを使用しているようです。それに応じて CSS コードを変更するか、別のアプローチを選択する必要があります。

「メニューポイント」がリンクであると仮定すると、最も簡単な方法は、

<div><a ...>link1</a> <a ...>link2</a></div>
<div><a ...>link3</a> <a ...>link4</a></div>

しかし、複雑なマークアップを使用していて、CSS だけでブレークを作成したい場合は、:nth-child(3).

于 2012-11-24T22:28:11.603 に答える