Question

我有一个ul里面的li标签列表，我想改变它们出现在客户端的顺序，而不是一个接一个地我想要它们就像我构建的一个简单的表一样。

表格

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;width: 300px; height: 300px;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-  style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font- weight:normal;padding:10px 5px;border-style:solid;border-  width:1px;overflow:hidden;word-break:normal;}
</style>
<table class="tg">
<tr>
<th class="tg-031e" colspan="2">Item 1</th>
</tr>                 
<tr>
<td class="tg-031e">Item 2</td>
<td class="tg-031e">Item 3</td>
</tr>
<tr>
<td class="tg-031e">Item 4</td>
<td class="tg-031e">Item 5</td>
</tr>
<tr>
<td class="tg-031e">Item 6</td>
<td class="tg-031e">Item 7</td>
</tr>
</table>

这是ul

<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
<li class="ui-state-highlight">Item 6</li>
<li class="ui-state-highlight">Item 7</li>
</ul>

我怎么能做到这一点？

Answer 1

如果数据是表格式的，那么使用表格可能是有意义的。

但如果它是导航列表或类似内容，您可以使用the display property为li设置样式，使它们显示在一行中。值inline，inline-block甚至table-cell都可以使用。

#sortable2 li {
  display: inline;
}

<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
<li class="ui-state-highlight">Item 6</li>
</ul>

如何操纵li标签以像表一样行事

1 个答案: