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

我想创建一个7乘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>

我希望<ul class="inner">中的<li>从左到右对齐，但我不知道如何做到这一点。

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

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>

这里有另一种使用更简单的标记和浮动的方法：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;
}

只需尝试以下CSS:

<html>
<head>
<style type="text/css">
.inner li{
float:left;
}
</style>
</head>
<body>
//Body Contents
</body>
</html>

它只是内部CSS（为了方便起见），您也可以使用外部CSS。希望这个工作：P

相关内容

最新更新

热门标签：