html 自动生成两列,html – 创建两列无​​序列表

作为原型,您可以从以下HTML开始：

• First Category
• Second Category
• Third Category
• Fourth Category
• Fifth Category

并应用以下CSS：

.two-col-special {

border: 1px dotted blue;

overflow: auto;

margin: 0;

padding: 0;

}

.two-col-special li {

display: inline-block;

width: 45%;

margin: 0;

padding: 0;

vertical-align: top; /* In case multi-word categories form two lines */

}

.two-col-special li:before {

content: '+';

padding: 5px;

margin-right: 5px; /* you can tweak the gap */

color: orange;

background-color: white; /* in case you want a color... */

display: inline-block;

}

诀窍是将显示类型更改为内联块并将宽度设置为约45％的某个数字.

加号作为列表项之前的伪元素添加.

如果文本(类别)的长度相似,那么这将给你一个相当干净的外观.