横向排列HTML描述列表的术语

Question

我有一个自动生成的带有两个<dl>标签的<dd>标签，这个列表被自动分成两个。我希望能够按时间顺序水平排列结果。

我现在就是这样的。

<dl class="filter-books">
  <dt><h3>Books</h3></dt>
    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_109" value="109" >
      <label class="book book-1" for="book_109"> Book 1 </label>
    </dd>

    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_96" value="96" >
      <label class="book book-2" for="book_96"> Book 2 </label>
    </dd>

    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_89" value="89" >
      <label class="book book-3" for="book_89"> Book 3 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_16" value="16" >
      <label class="book book-4" for="book_16"> Book 4 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_88" value="88" >
      <label class="book book-5" for="book_88"> Book 5 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_98" value="98" >
      <label class="book book-6" for="book_98"> Book 6 </label>
    </dd>
</dl>

CSS:

dd { float: left; width: 45%; padding-bottom: 0.5em; margin-left: 1em; }

当前显示的JSFiddle。

我希望它是如何在这个JSFiddle中显示。这个小提琴中的HTML列表只被修改以显示所需的结果。

任何帮助都是非常感谢的。谢谢你的进阶。

Answer 1

考虑到列表的长度是已知的，下面的操作将有效：http://jsfiddle.net/u63jS/。

CSS：

dd {
    display: inline-block;
    width: 45%; 
    padding-bottom: 0.5em; 
    margin-left: 1em; 
}

dd:nth-of-type(-n + 3) {
    float: left;
    clear: left;
}

下面的代码将在较旧的浏览器(例如IE6)中工作：http://jsfiddle.net/u63jS/1/。

dd {
    display: inline-block;
    width: 45%; 
    padding-bottom: 0.5em; 
    margin-left: 1em; 
}

dt + dd,
dt + dd + dd, 
dt + dd + dd + dd {
    float: left;
    clear: left;
}

另一个，一个不必要的复杂，但现代的柔性盒解决方案：http://jsfiddle.net/s6W5w/。

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.filter-books {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.filter-books > dt {
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
}

.filter-books > dd {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
}

.filter-books > dd:nth-of-type(1) {
    order: 1;
}

.filter-books > dd:nth-of-type(2) {
    order: 3;
}

.filter-books > dd:nth-of-type(3) {
    order: 5;
}

.filter-books > dd:nth-of-type(4) {
    order: 2;
}

.filter-books > dd:nth-of-type(5) {
    order: 4;
}

.filter-books > dd:nth-of-type(6) {
    order: 6;
}

最后，使用列的解决方案：http://jsfiddle.net/2Z9CT/。

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

dl > dt {
    position: absolute;
    top: 0;
}

dl {
    margin-top: 25px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count:2;
}

dl > dd {
    display: block;
}

Answer 2

这样做了，但我不知道您是如何生成数据的。

<dl class="filter-books">
  <dt><h3>Books</h3></dt>
    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_109" value="109" >
      <label class="book book-1" for="book_109"> Book 1 </label>
    </dd>
    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_16" value="16" >
      <label class="book book-4" for="book_16"> Book 4 </label>
    </dd>
    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_96" value="96" >
      <label class="book book-2" for="book_96"> Book 2 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_88" value="88" >
      <label class="book book-5" for="book_88"> Book 5 </label>
    </dd>

    <dd class="col1">
      <input type="checkbox" name="topic_books[]" id="book_89" value="89" >
      <label class="book book-3" for="book_89"> Book 3 </label>
    </dd>

    <dd class="col2">
      <input type="checkbox" name="topic_books[]" id="book_98" value="98" >
      <label class="book book-6" for="book_98"> Book 6 </label>
    </dd>
</dl>

Answer 3

如果允许使用jquery，则可以使用.wrapAll()函数。检查一下演示。

此jquery代码将移动所有dd有类col2

$('dd.col2').wrapAll('<div class="sub-menu" />');

用于修复对齐的CSS。

.sub-menu{
    float: right;
    position: absolute;
    right: 0;
    top: 40px;
    width: 48%;
}
.filter-books{position:relative;}