-1

我正在尝试在两列中显示一个列表。

奇数在左边，偶数在右边。

这就是我的意思：

+----------------------------------------------------+
|                    col-md-9                        |
+------------------------+---------------------------+
|     1.                 |        2                  |
|     3.                 |        4.                 |
|     5.                 |        6.                 |
|     7.                 |        8.                 |
|     9.                 |       10.                 |
|                        |                           |
|                        |                           |
|                        |                           |
|                        |                           |
+------------------------+---------------------------+

我的代码是：

<div class="col-md-9">
   <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>
   </ul>
</div>

我怎样才能做到这一点？ps：为了展开列表，我使用了while()循环

4

2 回答 2

0

请全屏查看我已使用 md，因此目前它将在每行 1 li 中显示。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-9">
  <ul class="row">
    <li class="col-md-6">1.</li>
    <li class="col-md-6">2.</li>
    <li class="col-md-6">3.</li>
    <li class="col-md-6">4.</li>
    <li class="col-md-6">5.</li>
    <li class="col-md-6">6.</li>
    <li class="col-md-6">7.</li>
    <li class="col-md-6">8.</li>
    <li class="col-md-6">9.</li>
    <li class="col-md-6">10.</li>
  </ul>
</div>

于 2016-01-01T11:34:07.970 回答
0

对于我们中间不喜欢自举的人：

<style>
    .ul-two-cols {
        display: block;
        width: 100%;
        listItemStyle: none;
        position: relative;
    }
    .ul-two-cols > li {
        display: inline-block;
        width: 49%;
    }
</style>
<div style="width: 300px;">
  <ul class="ul-two-cols">
    <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>
  </ul>
</div>

于 2016-01-01T12:11:12.270 回答