The Display:inline-block property is a good way to avoid the floating of elements, but there is a slight problem, that is, the carriage return between inline-block elements will be displayed as a space. However, when we write code, we use carriage return to format ...
The simplest way is to remove the inline-block elements between the carriage return, which is the code to show a little bit of beauty, affect reading.
Method Summary
The following methods do not guarantee browser compatibility issues and are only tested through the Chrome browser
HTML Code:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul>
<li>One</li><li>
Two</li><li>
Three</li>
</ul>
<ul>
<li>One</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
<ul>
<li>one
<li>two
<li>three
</ul>
<ul class= "Margin-fix" >
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class= "Font-size-fix" >
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class= "Flex-box" >
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS Code:
Body {
Font-family:sans-serif;
font-size:16px;
}
UL {
List-style:none;
}
Li {
Display:inline-block;
Background-color: #000;
Color: #fff;
padding:5px;
}
Ul.margin-fix Li {
Margin-right: -4px;
}
Ul.font-size-fix {
font-size:0;
}
Ul.font-size-fix Li {
font-size:16px;
}
Ul.flex-box {
Display:-webkit-box; /* Old-ios 6-, Safari 3.1-6 * *
Display:-moz-box; /* Old-firefox 19-(buggy but mostly works) * *
Display:-ms-flexbox; /* Tweener-ie 10 * *
Display:-webkit-flex; * New-chrome * *
Display:flex; * NEW, Spec-opera 12.1, Firefox 20+ * *
}
Effect Chart: