在同一行内从左到右对齐 <li>答案

【问题标题】：aligning <li> from left to right within the same row在同一行内从左到右对齐 <li>
【发布时间】：2014-10-22 20:51:00
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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>

【讨论】：

对不起，我的意思是显示
我在上面的答案中添加了一个代码 sn-p，请检查。这是您希望它在一行中对齐的方式吗？
这正是我想要的，但我仍然没有在我的页面上得到我想要的结果 =/
@liondancer 很高兴听到这个消息！请将我的答案标记为正确答案，以便用户知道您的查询已得到解答。谢谢。
@liondancer 顺便说一句，对于 7 x 3 网格，请查看这个 jsFiddle：jsfiddle.net/3cmk5kfs

【解决方案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;
}

【讨论】：

【解决方案3】：

试试下面的 CSS：

<html>

<head>

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

</head>

<body>

//Body Contents

</body>
</html>

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

【讨论】：