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>元素的数量是可变的，可以多于或少于三个元素，也可以多于两列！我想<li>“按列”订购 -elements 并将它们居中...

感谢帮助 ：-）

4

3 回答 3

4

以“Schalter 3”为中心的东西是text-align: center;。我们可以通过删除来解决这个问题

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

并添加：

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

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

在它的位置。这使 li 元素中的文本居中，而不是 ul 中的 li 元素居中。它会在左边添加边距以获得您想要的缩进。

工作小提琴。

于 2012-11-01T17:19:15.003 回答
0

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

于 2012-11-01T17:18:06.577 回答
0

看看这个小提琴。

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

于 2012-11-01T17:21:49.837 回答