4

現在、私は次のコードを持っています...

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="UTF-8" />
    <link href="verna.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
  <section id="devices">
    <h1>Gruppen</h1>
    <div class="group">
      <h2>Gruppe 1</h2>
      <ul>
        <li class="device">Schalter 1</li>
        <li class="device">Schalter 2</li>
        <li class="device">Schalter 3</li>
      </ul>
    </div>
    <div class="group">
      <h2>Gruppe 2</h2>
      <ul>
        <li class="device">Schalter 1</li>
        <li class="device">Schalter 2</li>
        <li class="device">Schalter 3</li>
      </ul>
    </div>
  </section>
  </body>
</html>


* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

#devices {
    background-color: yellow;
}

#devices .group {
    background-color: gray;
}

#devices .group ul {
    text-align: center;
}

#devices .group .device {
    background-color: green;
    display: inline-block;
    margin: 5px;
    max-width: 200px;
    width: 100%;
}

...次のようになります。 ここに画像の説明を入力

しかし、緑の<li>要素が列に浮かぶことを望みます。次のようになります。 ここに画像の説明を入力

注意: 緑色の要素の数<li>は可変です。要素が 3 つより多い場合も少ない場合も、2 つ以上の列がある場合もあります。<li>-要素を「列ごと」に並べ替えて、それらを中央に配置したい...

手伝ってくれてありがとう ：-）

4

3 に答える 3

4

「シャルター3」を中心に据えているのはtext-align: center;. 削除することでこれを修正できます

#devices .group ul {
    text-align: center;
}

そして追加：

#devices .group ul {
    margin-left: 50px;
}

#devices .group li {
    text-align: center;
}

その代わりに。これにより、ul 内の li 要素が中央に配置されるのではなく、li 要素内のテキストが中央に配置されます。そして、左にマージンを追加して、必要なインデントを取得します。

働くフィドル。

于 2012-11-01T17:19:15.003 に答える
0

このフィドルをチェックしてください。

トリックは、lis をブロック レベルの要素に戻して、幅を持たせることでした。次にwidth: 40%;、(40% で 5px の余白のための少しの余裕を残す) と を設定しfloat: left;ます。また、 float が含まれるように に追加overflow: auto;します。 ulli

于 2012-11-01T17:21:49.837 に答える
0

各「列」が適切な幅を持つ独自のコンテナー (div) になるように、html を再構築します。または、自分が嫌いな場合は、テーブルを使用してください。

于 2012-11-01T17:18:06.577 に答える