Question

我有一个多列下拉列表，第一行是标题“选择选项”，它应该是整列。从第二行开始，它必须被视为列数。我问这个特定布局的原因是有另一个与之相关的功能。

我正在检查是否有一种简单的方法可以通过CSS解决这个问题？

问题：

我们可以忽略列数排除的第一个li吗？基本上，第一个li是标题“选择选项”。我希望它是

<ul style="column-count: 2;">
<li style="color: gray;" class="label-default">Select the options</li>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
<li>option5</li>
<li>option6</li>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
<li>option5</li>
<li>option6</li>
</ul>

提前致谢

Answer 1

你可以隐藏它/你可以把它作为一个单独的元素，而不是把它作为li

检查此代码段

＆＃13;

<span style="color: gray;" class="label-default">Select the options</span>

<ul style="column-count: 2;">

<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
<li>option5</li>
<li>option6</li>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
<li>option5</li>
<li>option6</li>
</ul>

＆＃13;

希望有所帮助

Answer 2

您可以在第一个position: absolute上使用li，并在ul上设置填充，将列向下推。

ul {
  position: relative;
  padding-top: 20px;
  column-count: 2;
}
ul li.label-default {
  position: absolute;
  left: 0;
  top: 0;
  color: gray;
}

<ul>
  <li class="label-default">Select the options</li>
  <li>option1</li>
  <li>option2</li>
  <li>option3</li>
  <li>option4</li>
  <li>option5</li>
  <li>option6</li>
  <li>option1</li>
  <li>option2</li>
  <li>option3</li>
  <li>option4</li>
  <li>option5</li>
  <li>option6</li>
</ul>

Answer 3

您可以向第一个孩子申请column-span: all;吗？似乎是最简单的解决方案。

请参阅https://css-tricks.com/almanac/properties/c/column-span/

跳过列的列数css属性

3 个答案: