Table des matières
回复讨论(解决方案)
Maison interface Web tutoriel HTML div ul li新手初级问题,有图有代码,高手来看看谢谢._html/css_WEB-ITnose

div ul li新手初级问题,有图有代码,高手来看看谢谢._html/css_WEB-ITnose

Jun 24, 2016 pm 12:01 PM
li primaire 新手 maître

nbsp;html>


    
    


 

    
    




回复讨论(解决方案)

如果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>
Copier après la connexion
Copier après la connexion

如果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>
Copier après la connexion
Copier après la connexion



那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>
Copier après la connexion



那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%;} 这个又是什么意思
老大,我是菜鸟能不能解释细点,或弄简单点


关于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;}
Copier après la connexion

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Conseils pour jouer à Mist Lock Kingdom pour donner un guide aux débutants Conseils pour jouer à Mist Lock Kingdom pour donner un guide aux débutants Jan 28, 2024 pm 03:33 PM

Conseils pour jouer à Mist Lock Kingdom pour donner un guide aux débutants

Anchor Point Advent Dix recommandations de personnages d'entreprise pour les débutants Anchor Point Advent Dix recommandations de personnages d'entreprise pour les débutants Feb 20, 2024 pm 02:30 PM

Anchor Point Advent Dix recommandations de personnages d'entreprise pour les débutants

Apprendre à utiliser l'indentation par lots est une compétence que les débutants de PyCharm doivent maîtriser Apprendre à utiliser l'indentation par lots est une compétence que les débutants de PyCharm doivent maîtriser Dec 30, 2023 pm 12:58 PM

Apprendre à utiliser l'indentation par lots est une compétence que les débutants de PyCharm doivent maîtriser

Guide du débutant d'Ancient Crown et introduction au gameplay Guide du débutant d'Ancient Crown et introduction au gameplay Feb 20, 2024 am 11:20 AM

Guide du débutant d'Ancient Crown et introduction au gameplay

C vs C++ : quel est le meilleur pour les nouveaux programmeurs ? C vs C++ : quel est le meilleur pour les nouveaux programmeurs ? Mar 19, 2024 am 08:30 AM

C vs C++ : quel est le meilleur pour les nouveaux programmeurs ?

Quel élément est li ? Quel élément est li ? Aug 03, 2023 am 11:19 AM

Quel élément est li ?

Qu'est-ce que Li en HTML Qu'est-ce que Li en HTML Nov 19, 2021 pm 03:31 PM

Qu'est-ce que Li en HTML

Maîtrisez rapidement les compétences d'introduction du Phantom Beast Palu Maîtrisez rapidement les compétences d'introduction du Phantom Beast Palu Jan 23, 2024 am 08:45 AM

Maîtrisez rapidement les compétences d'introduction du Phantom Beast Palu

See all articles