html css 漂亮的列表 <ul> <li>,CSS使UL列表包裹LI

CSS

.wrap {

display:table;

background: green;

padding: 10px 20px;

}

ul {

display:table;

background: yellow;

margin: 0;

padding: 0;

font-size: 0;

}

li {

margin:0 4px 4px 0;

display: inline-block;

width: 70px;

height: 50px;

background: purple;

list-style: none;

}

li:nth-child(7){

margin-right: 0px;

}

的************* ********************** 强>

其他

也

CSS

.wrap {

background: green;

width: 520px;

padding: 10px 20px;

}

ul {

background: yellow;

margin: 0;

padding: 0;

border:0;

}

li {

position:relative;

display: inline-block;

width: 70px;

height: 50px;

background: purple;

list-style: none;

margin-right: 5px;

}

li:nth-child(7){

margin-right: 0px;

}

li:nth-child(14){

margin-right: 0px;

}

这不是“错误”(我不认为)。这只是在一条线上设置元素的方式。您希望键入的单词之间的空格是空格吗？这些块之间的空间就像单词之间的空格。这并不是说规范无法更新，因为内联块元素之间的空格应该没什么，但我相当确定这是一个不可能发生的大量蠕虫。

这里有一些方法可以消除差距并使内联块元素直接相邻。

删除空格

获得空格的原因是因为，元素之间有空格(换行符和几个选项卡计为空格，只是为了清楚)。最小化HTML将解决此问题，或其中一个技巧：

• one

• two

• three

或

• one

>

two

>

three

或评论......

• one
• two
• three

它们都非常时髦，但它确实可以解决问题。

负利润率

您可以使用负4px的边距将元素移回原位(可能需要根据父级的字体大小进行调整)。显然这在旧IE(6＆amp; 7)中是有问题的，但如果你不关心那些浏览器，至少你可以保持代码格式清洁。

display: inline-block;

margin-right: -4px;

略过结束标记

HTML5无论如何都不关心。虽然你必须承认，但感觉很奇怪。

• one
• two
• three