Question

我正在尝试根据浮动值对齐ul li。

因此，如果剩下浮动，那么它将向右对齐。但问题在于，当一个li正确浮动时，它会向右对齐但不在顶部。

Html代码 -

<ul>
  <li style="float:left;">Text 1</li>
  <li style="float:left;">Text 2</li>
  <li style="float:right;">Text 3</li>
</ul>

演示 - https://jsfiddle.net/squidraj/t2qmfkya/

现在他们都在一行，但我想以下面的方式显示它

Text 1    Text 3
Text 2

我不知道我的html格式是否可以实现这一点。

非常感谢任何帮助。

Answer 1

您可以使用CSS3 columns

ul {
  columns: 2;
  -moz-columns: 2;
  -webkit-columns: 2;
}

<ul>
  <li>Text 1</li>
  <li>Text 2</li>
  <li>Text 3</li>
</ul>

<强>更新

更随机li s

ul {
  columns: 5;
  -moz-columns: 5;
  -webkit-columns: 5;
}

<ul>
  <li>Text 1</li>
  <li>Text 2</li>
  <li>Text 3</li>
  <li>Text 4</li>
  <li>Text 5</li>
  <li>Text 6</li>
  <li>Text 7</li>
  <li>Text 8</li>
  <li>Text 9</li>
  <li>Text 10</li>
</ul>

Answer 2

这不是最漂亮的，但可能对你有帮助......

您可以使用特定的内联样式定位元素。

jsfiddle

ul li[style="float:left;"] {
  clear: left;
  margin-right: 20px;
}

ul li[style="float:right;"] {
  float: none !important;
}

ul {
  width: 180px;
  background: red;
  display: block;
  float: left;
  padding: 1rem;
  list-style: none;
}
ul li[style="float:left;"] {
  clear: left;
  margin-right: 20px;
}
ul li[style="float:right;"] {
  float: none !important;
}

<ul>
  <li style="float:left;">Text 1</li>
  <li style="float:left;">Text 2</li>
  <li style="float:right;">Text 3</li>
  <li style="float:right;">Text 4</li>
  <li style="float:left;">Text 5</li>
</ul>

<强>更新

ul li[style="float:right;"] {
  float: none !important;
  padding-left: 100px;
}

这可确保所有float：right元素排成一行。

fiddle

Answer 3

尝试以这种方式https://jsfiddle.net/t2qmfkya/5/

<ul>
  <li class="right-item" style="float:right;">Text 3</li>
  <li class="right-item" style="float:right;">Text 4</li>
  <li>Text 1</li>
  <li>Text 2</li>  
</ul>


ul {
  width: 180px;
  background: red;
  padding: 1rem;
  list-style: none;
  overflow: hidden;
}

ul li {
  overflow: hidden;
}
.right-item{
  width: 51%;
}

Answer 4

重新排列元素并使用clear都可以处理：

ul {
  width: 180px;
  background: red;
  display: block;
  float: left;
  padding: 1rem;
  list-style: none;
}

ul li {}

<ul>
  <li style="float:left;">Text 1</li>
  <li style="float:right;">Text 3</li>
  <li style="clear:both;">Text 2</li>
</ul>

使用左右浮动进行对齐

4 个答案: