Question

目前我有以下代码......

<!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%;
}

......看起来像这样： enter image description here

但我希望绿色<li> - 元素浮动在列中。它应该如下所示： enter image description here

请注意：绿色<li> - 元素的数量是可变的，可以有多于或少于三个元素，并且可以有两列以上！我想订购<li> - 元素“列式”并将它们居中......

感谢您的帮助： - ）

Answer 1

以“Schalter 3”为中心的是text-align: center;。我们可以通过删除

来解决这个问题

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

并添加：

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

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

取而代之的是。这使文本在li元素中居中，而不是将li元素置于ul中。并且它会在左侧添加边距以获得您想要的缩进。

Working Fiddle.

Answer 2

重构你的html，使每个“列”都是它自己的容器（div），它具有适当的宽度。或者，如果你讨厌自己，请使用表格。

Answer 3

Check out this fiddle.

诀窍是将li转回块级元素，以便它们可以具有宽度。然后设置width: 40%;（40％为5px边距留出一点空间）和float: left;。同时将overflow: auto;添加到ul，以便它包含其已浮动的li。

居中浮动元素

3 个答案: