Question

我想创建一个7乘3的网格。现在我不知道如何使3个块彼此对齐。 CSS对我来说非常困惑，因为我觉得有太多方法可以做同样的事情。我四处寻找其他例子，我认为display: inline-block;应该为我做这件事，但我似乎无法让它发挥作用。

我的HTML：

  <ul class="">

    <li class="">
      <ul class="inner">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>

    ... 6 more time

   </ul>

我希望<li>中的<ul class="inner">从左到右对齐，但我不知道该怎么做。

Answer 1

border: inline-block;没有有效的CSS属性，display: inline-block上使用.inner li。

ul.inner li {
  display: inline-block;
}

<ul class="">

  <li class="">
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li class="">
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li class="">
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li class="">
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li class="">
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li class="">
    <ul class="inner">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>

</ul>

Answer 2

以下是另一种使用简单标记和浮动的方法：http://jsfiddle.net/dLqaapmz/。

HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
</ul>

CSS：

ul {
    display: table;
    list-style-type: none;
}

ul > li {
    float: left;
    width: 100px;
    text-align: center;
}

ul > li:nth-of-type(3n + 1) {
    clear: left;
}

Answer 3

试试以下CSS：

<html>

<head>

<style type="text/css">
.inner li{
float:left;
}
</style>

</head>

<body>

//Body Contents

</body>
</html>

它只是内部CSS（为了您的容易），您也可以使用外部CSS。希望这有效：P

在同一行中从左到右对齐<li> </li>

3 个答案: