對齊 <li> 在同一行中從左到右

Question

我想創建一個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>從左到右對齊，但是我不知道該怎么做。

Answer 1

沒有有效的border: inline-block; CSS屬性border: inline-block; ，使用.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>

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> 在同一行中從左到右

問題描述

3 個解決方案

解決方案1
3 已采納 2014-10-22 20:52:14

解決方案2
1 2014-10-22 21:00:39

解決方案3
0 2014-10-22 20:57:55

對齊 <li> 在同一行中從左到右

問題描述

3 個解決方案

解決方案1 3 已采納 2014-10-22 20:52:14

解決方案2 1 2014-10-22 21:00:39

解決方案3 0 2014-10-22 20:57:55

解決方案1
3 已采納 2014-10-22 20:52:14

解決方案2
1 2014-10-22 21:00:39

解決方案3
0 2014-10-22 20:57:55