div ul li Basic questions for beginners. There are pictures and codes. Experts can take a look. Thank you._html/css

Table of Contents

Home

Web Front-end

HTML Tutorial

div ul li Basic questions for beginners. There are pictures and codes. Experts can take a look. Thank you._html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:01 PM

li primary newbie master

.header-nav {margin: 0 auto; margin:3px 3px ; border: thin solid red;    }
.header-nav ul {   width:99%; margin:3px 3px ; border: thin solid  black; }
.header-nav li { float: left; width:13%;   list-style-type: none;
                margin:3px 3px ; border: thin solid orange;  }

首页

品牌中心

专家团队

回复讨论(解决方案)

如果li float了之后，会影响兄弟，父级元素。所以必须使用clear来清除。
demo here

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .header-nav {margin: 0 auto; margin:3px 3px ; border: thin solid red;    }        .header-nav ul { width:99%; margin:3px 3px ; border: thin solid  black; }        .header-nav li { float: left; width:13%; list-style-type: none;margin:3px 3px ; border: thin solid orange;  }        .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}        .clearfix{display:inline-block;}        html[xmlns] .clearfix{display:block;}        * html .clearfix{height:1%;}    </style></head><body><div class="header-nav">    <ul class="clearfix">        <li><a href="">首页</a></li>        <li><a href="" target="_blank">品牌中心</a></li>        <li><a href="" target="_blank">专家团队</a></li>    </ul></div></body></html>

Copy after login

如果li float了之后，会影响兄弟，父级元素。所以必须使用clear来清除。
demo here

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .header-nav {margin: 0 auto; margin:3px 3px ; border: thin solid red;    }        .header-nav ul { width:99%; margin:3px 3px ; border: thin solid  black; }        .header-nav li { float: left; width:13%; list-style-type: none;margin:3px 3px ; border: thin solid orange;  }        .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}        .clearfix{display:inline-block;}        html[xmlns] .clearfix{display:block;}        * html .clearfix{height:1%;}    </style></head><body><div class="header-nav">    <ul class="clearfix">        <li><a href="">首页</a></li>        <li><a href="" target="_blank">品牌中心</a></li>        <li><a href="" target="_blank">专家团队</a></li>    </ul></div></body></html>

Copy after login

那after  是什么意思
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

.clearfix{display:inline-block;}
    html[xmlns] .clearfix{display:block;}
  * html .clearfix{height:1%;} 这个又是什么意思
老大,我是菜鸟能不能解释细点,或弄简单点

而且我用了,没效果啊,还是没变化

有效果 ,但那个ul还是超出了div 它不是在div里面吗,怎么超出去了

如果li float了之后，会影响兄弟，父级元素。所以必须使用clear来清除。
demo here

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       *{margin:0;padding:0;}        .header-nav {margin: 0 auto; margin:3px 3px ; border: thin solid red;    }        .header-nav ul { width:99%; margin:3px 3px ; border: thin solid  black; }        .header-nav li { float: left; width:13%; list-style-type: none;margin:3px 3px ; border: thin solid orange;  }        .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}        .clearfix{display:inline-block;}        html[xmlns] .clearfix{display:block;}        * html .clearfix{height:1%;}    </style></head><body><div class="header-nav">    <ul class="clearfix">        <li><a href="">首页</a></li>        <li><a href="" target="_blank">品牌中心</a></li>        <li><a href="" target="_blank">专家团队</a></li>    </ul></div></body></html>

Copy after login

关于clearfix
个人建议问百度或许比较更全面清楚一点， http://www.baidu.com/s?wd=clearfix&rsv_bp=0&tn=baidu&rsv_spt=3&ie=utf-8&rsv_sug3=1&rsv_sug4=42&rsv_sug1=1&rsv_sug2=0&inputT=1028
超出去的原因，没有重置css。
什么是重置css

*{margin:0;padding:0;}

Copy after login

Statement of this Website

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

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

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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

Where is the login entrance for gmail email?

7467

CakePHP Tutorial

1376

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

Tips for playing the Mist Lock Kingdom to give newbies a guide Jan 28, 2024 pm 03:33 PM

Mistlock Kingdom is an open world game where players can play as Sons of Fire to survive and explore. The game combines the unique entertainment of action RPG challenges, bringing players endless surprises and joy. In the game, players can explore resources, environments, weapons and more. Some novice players may be curious about how to get started with the game. In this introduction and sharing, we will provide you with some relevant getting started guides. Tips for Beginners to the Fog Lock Kingdom: The danger levels of areas shrouded by miasma are different. During the exploration process, new areas of the map will be gradually unlocked, and the location of the areas shrouded by miasma can be seen. The map will be distinguished by two colors. The blue area can be entered in a short time. The time you can stay will also be different depending on the character's ability level.

Anchor Point Advent Novice Ten Company Character Recommendations Feb 20, 2024 pm 02:30 PM

Anchor Arrival is a 3D turn-based card game with a high-definition beautiful girl two-dimensional theme. It provides a rich and exciting combination of characters for players to explore and experience. It has many powerful combinations of high-quality lineups. New players are also curious novices. What powerful characters are recommended in the pool? Let’s take a look at the selection reference for novices to win ten consecutive golds! Anchor Point Advent is a powerful character recommendation for novice pools. The first ten-consecutive pick is Alice. She is mainly a single-target lightning-type burst character. The output is very explosive, and the experience will be very friendly to newcomers, so it is highly recommended to choose it. It is recommended to choose the combination of "Alice" + "Antelope" for 10 points. Alice is the most worthy character to output the goldpire attribute, and is not even a bit stronger than the other two characters in the novice card pool. Alice can pass special

Learning to use batch indentation is a skill that PyCharm newbies must master Dec 30, 2023 pm 12:58 PM

Essential skills for newbies to PyCharm: Mastering the use of batch indentation requires specific code examples Overview: PyCharm is a powerful Python integrated development environment (IDE) that provides many practical tools and functions to help developers improve efficiency . In the daily coding process, we often need to indent the code to keep the code format neat and beautiful. The batch indentation function provided by PyCharm can help us quickly batch indent the code and improve coding efficiency. This article will explore Py

Ancient Crown Beginner's Guide and Gameplay Introduction Feb 20, 2024 am 11:20 AM

Crown of the Ancients is a high-quality and strategic card mobile game based on Western magical adventure. In-game secret exploration, ruins adventure, national championship and other special gameplay are waiting for you to experience. So for novice players, if they want to get started with this game quickly, a novice guide is indispensable. Today, the editor will bring you the relevant guide, let’s take a look. An overview of the Ancient Crown beginner’s guide, gameplay and area opening styles: 1. Diamond accumulation flow: Everything is focused on accumulating diamonds, and then you start to work hard after leaving the village. Except for the main magic weapon, three flywheel activities, etc., which require diamonds, the others are ignored. The main focus is on one of them. Don't pay attention to the hero challenge. You can fight as many as you can, and don't force it. Advantages: You only need to mess around to accumulate diamonds. After leaving the village, you can quickly access the latest activities with diamonds, get new series of hardware heroes, and diamonds are broken.

What element is li? Aug 03, 2023 am 11:19 AM

li is an element in the HTML markup language and is used to create lists. li represents a list item, which is a child element of ul or ol. The role of the li tag is to define each item in the list. In HTML, the li element is usually used with the ul or ol element to create an ordered or unordered list. Unordered lists use the ul element, and list items are represented by the li element, while ordered lists use the ol element, also using li Element representation.

C Language vs. C: Which Is Better for New Programmers Mar 19, 2024 am 08:30 AM

C Language or C: Which Is More Suitable for New Programmers In the era of rapid development of modern technology, learning programming has become an increasingly popular choice, whether as part of career development or as a way to improve logical thinking skills. Among many programming languages, C language and C are both very classic and representative languages. Many people are confused about how to choose C language or C as an entry-level programming language. So, is C language more suitable for programming novices, or is C more suitable? Need specific code examples to

Quickly master the introductory skills of the Phantom Beast Palu Jan 23, 2024 am 08:45 AM

Phantom Beast Parlu is an open world survival game that supports multiplayer online. The game has a wealth of ways to collect creatures, and players can engage in various explorations such as combat, construction, and survival. For novice players, it is very important to master the operating skills and gameplay content of the game. Here are some newbie strategy tips for reference. 1. Learn basic operations: Before starting the game, it is recommended to learn the basic operations of the game, including movement, attack, collection, etc. This allows for better control of the character's operations. 2. Explore the world: The world of Phantom Beast Parlu is very vast, with many hidden places and resources waiting for players to discover. Don’t be afraid to take risks, try to explore every corner and find the Phantom Beast Palu. Quick tips for newbies. 1. Base site selection, put flatness first. In the Phantom Beast Pallu, choose a

What is li in html Nov 19, 2021 pm 03:31 PM

In HTML, the full English name of li is "list item", which means "list item". It is an element tag that defines a list item. The syntax is "<li>list item content</li>"; "<li>" tag Available in ordered list "<ol>" and unordered list "<ul>".

See all articles