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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

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

Mistlock Kingdom est un jeu en monde ouvert dans lequel les joueurs peuvent incarner des Sons of Fire pour survivre et explorer. Le jeu combine le divertissement unique des défis d'action RPG, offrant aux joueurs des surprises et une joie sans fin. Dans le jeu, les joueurs peuvent explorer des ressources, des environnements, des armes et bien plus encore. Certains joueurs novices peuvent être curieux de savoir comment démarrer avec le jeu. Dans cette introduction et ce partage, nous vous fournirons quelques guides de démarrage pertinents. Conseils pour les débutants dans le royaume de Fog Lock : Les niveaux de danger des zones enveloppées de miasmes sont différents. Au cours du processus d'exploration, de nouvelles zones de la carte seront progressivement déverrouillées et l'emplacement des zones enveloppées de miasmes pourra être vu. La carte sera distinguée par deux couleurs. La zone bleue peut être saisie pendant une courte période. La durée pendant laquelle vous pourrez rester variera également en fonction du niveau de capacité du personnage.

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 Arrival est un jeu de cartes au tour par tour en 3D avec un thème 2D de belle fille haute définition. Il offre une combinaison riche et passionnante de personnages que les joueurs peuvent explorer et expérimenter. Il propose de nombreuses combinaisons puissantes de compositions de haute qualité. aussi les novices curieux.Quels personnages puissants sont recommandés dans le pool ? Jetons un coup d'œil à la référence de sélection pour les novices pour remporter dix médailles d'or consécutives ! Les personnages puissants recommandés par le pool des novices sont principalement une célibataire. -caractère explosif de type tonnerre cible La sortie est très explosive et l'expérience sera très conviviale pour les nouveaux arrivants, il est donc fortement recommandé de le choisir. Il est recommandé de choisir la combinaison "Alice" + "Antelope" pour un bonus de 10 tirages. Alice est le personnage le plus digne de produire l'attribut goldpire, et n'est même pas un peu plus forte que les deux autres personnages du pool de cartes novice. . Alice peut passer un spécial

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

Compétences essentielles pour les débutants dans PyCharm : Maîtriser l'utilisation de l'indentation par lots nécessite des exemples de code spécifiques Présentation : PyCharm est un puissant environnement de développement intégré (IDE) Python qui fournit de nombreux outils et fonctions pratiques pour aider les développeurs à améliorer leur efficacité. Dans le processus de codage quotidien, nous devons souvent mettre le code en retrait pour que le format du code reste propre et beau. La fonction d'indentation par lots fournie par PyCharm peut nous aider à indenter rapidement le code par lots et à améliorer l'efficacité du codage. Cet article explorera Py

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

Crown of the Ancients est un jeu mobile de cartes stratégique de haute qualité basé sur l'aventure magique occidentale. L'exploration secrète dans le jeu, l'aventure des ruines, le championnat national et d'autres jeux spéciaux vous attendent. Alors pour les joueurs débutants, s'ils souhaitent débuter rapidement avec ce jeu, un guide débutant est indispensable. Aujourd'hui, l'éditeur vous apportera le guide pertinent, jetons un oeil. Un aperçu du guide de gameplay pour les novices dans Crown of Ancients et des écoles d'ouverture : 1. Flux d'accumulation de diamants : tout est axé sur l'accumulation de diamants, puis vous commencez à travailler dur après avoir quitté le village. À l'exception de l'arme magique principale, des trois activités de volant d'inertie, etc., qui nécessitent des diamants, les autres sont ignorées. Ne faites pas attention au défi du héros. Vous pouvez en jouer autant que vous le pouvez. , et ne forcez pas. Avantages : Il vous suffit de déconner pour accumuler des diamants. Après avoir quitté le village, vous pouvez accéder rapidement aux dernières activités avec des diamants, obtenir de nouvelles séries de héros matériels et les diamants sont brisés.

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

li est un élément du langage de balisage HTML et est utilisé pour créer des listes. li représente un élément de liste, qui est un élément enfant de ul ou ol. Le rôle de la balise li est de définir chaque élément de la liste. En HTML, l'élément li est généralement utilisé avec l'élément ul ou ol pour créer une liste ordonnée ou non. Les listes non ordonnées utilisent l'élément ul, et les éléments de liste sont représentés par l'élément li, tandis que les listes ordonnées utilisent l'élément ol, en utilisant également. li Représentation des éléments.

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

Langage C ou C++ : lequel convient mieux aux nouveaux programmeurs À l'ère du développement rapide de la technologie moderne, l'apprentissage de la programmation est devenu un choix de plus en plus populaire, que ce soit dans le cadre du développement de carrière ou comme moyen d'améliorer les capacités de réflexion logique. Parmi les nombreux langages de programmation, le langage C et le C++ sont à la fois des langages très classiques et représentatifs. De nombreuses personnes ne savent pas comment choisir le langage C ou C++ comme langage de programmation d'entrée de gamme. Alors, le langage C est-il plus adapté aux novices en programmation, ou le C++ est-il plus adapté ? Besoin d'exemples de code spécifiques pour

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

Phantom Beast Parlu est un jeu de survie en monde ouvert qui prend en charge le mode multijoueur en ligne. Le jeu propose une multitude de façons de collecter des créatures et les joueurs peuvent se lancer dans diverses explorations telles que le combat, la construction et la survie. Pour les joueurs novices, il est très important de maîtriser les compétences opérationnelles et le contenu du jeu. Voici quelques conseils stratégiques pour les débutants à titre de référence. 1. Apprendre les opérations de base : Avant de commencer le jeu, il est recommandé d'apprendre les opérations de base du jeu, notamment le mouvement, l'attaque, la collecte, etc. Cela permet un meilleur contrôle des opérations du personnage. 2. Explorez le monde : Le monde de Phantom Beast Parlu est très vaste, avec de nombreux endroits et ressources cachés qui attendent que les joueurs les découvrent. N'ayez pas peur de prendre des risques, essayez d'explorer chaque recoin et de trouver le Phantom Beast Palu Conseils rapides pour les débutants 1. Sélection du site de base, mettez la planéité en premier Dans le Phantom Beast Pallu.

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

En HTML, le nom anglais complet de li est "list item", ce qui signifie "list item". Il s'agit d'une balise d'élément qui définit un élément de liste. La syntaxe est "<li>list item content</li>" ; Balise <li>" Disponible en liste ordonnée "<ol>" et en liste non ordonnée "<ul>".

See all articles