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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

		<nav>		<ul>		<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/flower.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose" >FL</a></li>			<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/flower.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose" >FL</a></li>		<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/flower.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose" >FL</a></li>		<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/flower.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose" >FL</a></li>		</ul>		</nav>

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

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="/static/imghwm/default1.png"  data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg"  class="lazy"   / alt="What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose" >FL</a></li><li><a><img  src="/static/imghwm/default1.png"  data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg"  class="lazy"   / alt="What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose" >FL</a></li><li><a><img  src="/static/imghwm/default1.png"  data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg"  class="lazy"   / alt="What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose" >FL</a></li><li><a><img  src="/static/imghwm/default1.png"  data-src="http://avatar.csdn.net/3/E/3/2_neorobin.jpg"  class="lazy"   / alt="What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose" >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>

Thank you everyone

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

See all articles