Web Front-end
HTML Tutorial
What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose
What does it mean to use float:left and display:inline together? _html/css_WEB-ITnose
<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>
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?
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>Thank you everyone
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
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
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
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
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
