What does it mean to use float:left and display:inline together? _html/css

What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:01

Original

1808 people have browsed it

		<nav>		<ul>		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>			<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>		<li><a href="#"><img src="images/flower.png" width="68" height="54" />FL</a></li>		</ul>		</nav>

Copy after login

nav ul li{	float: left;	width: 72px;	display: inline;}nav li a { display:block;}

Copy after login

Above are html, css and renderings

Reply to discussion (solution)

There are several questions:
1. Why are float left and display inline used at the same time in li? The sensory effects are almost the same. I found out online that li is a semi-block element. Is this related to it?
2. Why is display: block required in a, and the effect seems to be unchanged after removing it.
3. The text "FL" was originally side by side with the picture. After setting the width in css to 72px, FL automatically moved to the bottom. What is the reason?

Because is an inline element, unlike div, which is a block and display:block is a definition block (the difference you can see between the two is whether line breaks will be parsed). You can remove the left float from your first block and add it below. Regarding FL being squeezed out, you should learn more about floating. I also just joined the front-end program, and we can learn from each other.

There are a few questions:
1. Why are float left and display inline used at the same time in li? The sensory effects are almost the same. I found out online that li is a semi-block element. Is this related to it?
2. Why is display: block required in a, and the effect seems to be unchanged after removing it.
3. The text "FL" was originally side by side with the picture. After setting the width in css to 72px, FL automatically moved to the bottom. What is the reason?

The first one: I seem to have seen it before, not the front end, but I know a little about it, display:inline; when IE6 was popular, this line solved many compatibility problems.
The second one: display:block; is to display the block. There is no change. If you background it, there is a big difference between adding it and not adding it.
Third: You defined the width of li as 72, and the width of the picture as 68. FL also takes up position. If the font-size you set is 10px, then the width of the picture plus FL will be 88. If it exceeds the 72 you defined, it must be a new line

After float, display: inline is to solve the problem of double margins in ie6.

displayinline is to solve the problem. IE BUG

<!DOCTYPE html><html><head><style>nav ul li{    float: left;    /* width: 72px; *//* 72 - 68 = 4px 不够容纳后面文字的宽度了, 会把文字挤到下一行 */    width: 120px; /* 120 - 68 = 52px 如果足够容纳后面文字的宽度, 就不会把文字挤到下一行 */    display: inline;}nav li a {    /* display: block; */}nav li a:hover {    /* 在 a 有或者无 display: block; 时分别查看 a 显示出的形状和尺寸 */    background-color: red;    border: 3px blue solid;}nav li a img{    width: 68px;    height: 54px;}</style></head><body><nav><ul><li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" />FL</a></li><li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" />FL</a></li><li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" />FL</a></li><li><a><img src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg" />FL</a></li></ul></nav>如果没有 float: left; 此处这些文字将在所有的 li 元素下面换行显示, 否则将接在最后一个 li 元素的右边显示<br><br>li 的默认 display 属性是 list-item, 这个属性一是让 li 象 block 元素一样是矩形形状, 并且独占一行, 另外还在它之前有一个 marker box, 默认样式下, 这个 marker box 会是显示为一个黑圆点<br><br>li {display: inline} 让 li 不再独占一行, 宽度上只会得到必要的而不是占有所在容器的全宽,另外也去掉了 marker box.<br><br>display: block 让一个元素显示成矩形, 在尺寸是 auto 时, 浏览器会给它分配足够的 height 和 width 以容纳它的内部无素.<br><br>a 元素默认是一个 inline 元素, 不保证始终是一个矩形, 此例中, 浏览器自动计算的高度可能会不够容纳内部的 img 元素, 而只是文本所需的高度.</body></html>

Copy after login

Thank you everyone