【问题标题】:auto columns to have each LI of UL justified on a single line自动列使 UL 的每个 LI 在一行上对齐
【发布时间】:2017-09-11 12:59:14
【问题描述】:

我有一个包含许多列表元素的无序列表。我不知道所述ulli 元素的确切数量——例如,它可能是3 个或4 个元素(都是非常简洁的元素)——但我display 每个li 作为@ 987654326@(不是实际列表),并希望使用columns 功能将其全部设置在一行上,同样居中/对齐。

但是,如果我执行columns: 4,并且只有 3 个元素,那么它们会显示为好像缺少第四个元素。有没有办法让它们像指定 columns: 3 一样显示? (我尝试将列设置为auto,但在我测试的浏览器中似乎没有做任何事情。)

基本上,我希望将ulcolumns CSS 属性设置为ul 在CSS 中拥有的li 子级的数量。

【问题讨论】:

  • 你能展示一下你到目前为止做了什么吗?
  • @ShadowFiend,它是here;我想根据条件添加第四个元素,但静态 CSS 可以同样适用于 3 或 4 个元素
  • 我的意思是代码?

标签: css css-multicolumn-layout


【解决方案1】:

通过改变 li 元素的 display 属性,你可以使这个(3 或 4 lis)居中对齐你的窗口。

ul#registrar {
    text-align: center;
}
ul#registrar li {
    display: inline-block;
}
<ul id="registrar">
<li><a href="/reg.com">reg.com</a></li>
<li><a href="/reg.ru">reg.ru</a></li>
<li><a href="/nic.ru">nic.ru</a></li><li><a href="/nic.ru">nic.ru</a></li>
</ul>

【讨论】:

猜你喜欢
  • 2010-10-17
  • 2014-03-06
  • 2013-06-18
  • 2012-08-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多