html – 列出带有直边框的2列中的项目

概述我有一个清单项目.我想要实现的是在移动视图中,我希望列表连续显示2个项目. 因此,我将UL标记设置为列：2.它完美地工作,但缺点是因为这些项目具有border-top属性,它们将是中间的线间隙. 我可以知道有没有办法让我在没有间隙的情况下制作全宽边框而不需要更改为另一个html标签(因为这个列表格式是从WordPress小部件生成的) 这是一个问题的例子. ul { display: bloc 我有一个清单项目.我想要实现的是在移动视图中,我希望列表连续显示2个项目.

因此,我将ul标记设置为列：2.它完美地工作,但缺点是因为这些项目具有border-top属性,它们将是中间的线间隙.

我可以知道有没有办法让我在没有间隙的情况下制作全宽边框而不需要更改为另一个HTML标签(因为这个列表格式是从wordpress小部件生成的)

这是一个问题的例子.

ul {  display: block;  columns: 2;}li {  border-top: 1px solID #e9e9e9;  List-style: none;}

<ul><li>TEST 1</li><li>TEST 2</li><li>TEST 3</li><li>TEST 4</li><li>TEST 5</li><li>TEST 6</li><li>TEST 7</li><li>TEST 8</li></ul>

解决方法 你可以使用column-gap：0;你的ul

ul {  display: block;  -webkit-columns: 2;  /* Chrome,Safari,Opera */  -moz-columns: 2;  /* firefox */  columns: 2;  -webkit-column-gap: 0;  /* Chrome,Opera */  -moz-column-gap: 0;  /* firefox */  column-gap: 0;}li {  border-top: 1px solID #e9e9e9;  List-style: none;}

<ul>  <li>TEST 1</li>  <li>TEST 2</li>  <li>TEST 3</li>  <li>TEST 4</li>  <li>TEST 5</li>  <li>TEST 6</li>  <li>TEST 7</li>  <li>TEST 8</li></ul>

Always use Webkit prefixs with the new CSS styles for better support

希望这有用.

总结

以上是内存溢出为你收集整理的html – 列出带有直边框的2列中的项目全部内容，希望文章能够帮你解决html – 列出带有直边框的2列中的项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。