相关疑难解决方法(0)

可能重复:
CSS:如何将列表分成页面上的列？

我一直在寻找这个解决方案而找不到它,所以我想我会发布我最终制作的内容.

我试图建立一个单独的列表,在第5项之后,列表将换行并移动到另一列.这是因为它可以是超级动态的,用户需要多少项.

这是我提出的解决方案.

 li{
   position: relative;
   line-height: -6px;
}
    
 ol li:nth-child(6) {
    margin-top: -90px;
}
    
 ol li:nth-child(-n+5){
    margin-left: 0em;
 }
    
 ol li:nth-child(n+6){
   margin-left: 10em;
 }

 <ol>
      <li>Aloe</li>
      <li>Bergamot</li>
      <li>Calendula</li>
      <li>Damiana</li>
      <li>Elderflower</li>
      <li>Feverfew</li>
      <li>Ginger</li>
      <li>Hops</li>
      <li>Iris</li>
      <li>Juniper</li>
 </ol>
    
    
   

这是小提琴:http://jsfiddle.net/im_benton/tHjeJ/

你觉得我的解决方案怎么样？什么是适用于IE的解决方案？

我my_list 在上下文中有一个列表,我想将它呈现为两个"列",第一列中的第一个(n + 1)/ 2项和第二列中的最后一个n/2项.有没有一种直接的方法来使用django模板标签/过滤器,或者我需要在我的视图中预先将列表拆分为两个？

例如,

<div class="split-50-left">
  <ul> 
    {% for item in [first half of my_list] %}
      <li>{{item}}</li>
    {% endfor %}
  </ul>
</div>
<div class="split-50-right">
  <ul> 
    {% for item in [second half of my_list] %}
      <li>{{item}}</li>
    {% endfor %}
  </ul>
</div>

我UL和LI列表的最大项目数是10，我想，如果超过5个移动的项目的第二列，只想用CSS来处理，我试着用CSS3“列”，但其在第二列所有项目会，如何确保将超过5个的项目移至第二列

问题是，仅当li大于5且li小于或等于5时，LI才应出现在第二列中

.listItems {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
.listItems li {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 4px 0;
}

<ul role="menu" class="listItems">
  <li><a href="javascript;;">List Item 1</a></li>
  <li><a href="javascript;;">List Item 2</a></li>
  <li><a href="javascript;;">List Item 3</a></li>
  <li><a href="javascript;;">List Item 4</a></li>
  <li><a href="javascript;;">List Item 5</a></li>
  <li><a href="javascript;;">List Item 6</a></li>
  <li><a href="javascript;;">List Item 7</a></li>
  <li><a href="javascript;;">List Item 8</a></li>
  <li><a href="javascript;;">List Item …

我有一个这样的链接列表:

<div id="linklist">
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
</div>

现在我希望将它们放在3列中(在此示例中)每列2个链接.我知道有一个CSS3属性列数和其他类似但不知何故链接在一行中.(-webkit-如果以后需要,我会添加前缀.)

CSS:

#linklist a {
    display: inline-block;
    margin: 3px;
    padding: 4px;
    -moz-column-count: 2;
}

我正在尝试构建一个这样的无序列表:

 - Item 1     |    - Item 4
 - Item 2     |    - Item 5
 - Item 3     |    - Item 6

我有这个HTML:

 <div class="multi-column">
    <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
       <li>Item 5</li>
       <li>Item 6</li>
    </ul>
 </div>

这个CSS:

.multi-column {
   -moz-column-count: 2;
   -moz-column-gap: 20px;
   -moz-column-fill: auto;
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
   -webkit-column-fill: auto;
   column-count: 2;
   column-gap: 20px;
   column-fill: auto;
}

它按照预期构建了两列,但它在左侧放置4个项目,在右侧放置2个(4x2).我想要的是3 x 3.

我还尝试在column-fill属性中使用balance值,但它不起作用.

我在这里错过了什么？

我有一个项目列表,我想在三列中按字母顺序(从上到下)均匀显示.是否可以仅使用css进行管理？

使用下面的示例代码,三列将包含以下数量的项目:3/3/2.

<div class="content">
  <div class="list_container">
    <div class="list_item">Adis Abeba</div>
    <div class="list_item">Amsterdam</div>
    <div class="list_item">Beijing</div>
    <div class="list_item">Buenos Aires</div>
    <div class="list_item">Johannesburg</div>
    <div class="list_item">Mexico City</div>
    <div class="list_item">Paris</div>
    <div class="list_item">Stockholm</div>
  </div>
</div>

演示:http://jsfiddle.net/BERSp/1/