Inhaltsverzeichnis
回复讨论(解决方案)
Heim Web-Frontend HTML-Tutorial div ul li新手初级问题,有图有代码,高手来看看谢谢._html/css_WEB-ITnose

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

Jun 24, 2016 pm 12:01 PM
li primär 新手 Master

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>
Nach dem Login kopieren
Nach dem Login kopieren

如果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>
Nach dem Login kopieren
Nach dem Login kopieren



那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>
Nach dem Login kopieren



那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;}
Nach dem Login kopieren

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tipps zum Spielen des Mist Lock Kingdom, um Neulingen eine Anleitung zu geben Tipps zum Spielen des Mist Lock Kingdom, um Neulingen eine Anleitung zu geben Jan 28, 2024 pm 03:33 PM

Mistlock Kingdom ist ein Open-World-Spiel, in dem Spieler als Söhne des Feuers spielen können, um zu überleben und zu erkunden. Das Spiel vereint die einzigartige Unterhaltung von Action-RPG-Herausforderungen und beschert den Spielern endlose Überraschungen und Freude. Im Spiel können Spieler Ressourcen, Umgebungen, Waffen und mehr erkunden. Einige Anfänger sind möglicherweise neugierig, wie sie mit dem Spiel beginnen sollen. In dieser Einführung und Weitergabe stellen wir Ihnen einige relevante Leitfäden für den Einstieg zur Verfügung. Tipps für Anfänger im Nebelschleusen-Königreich: Die Gefahrenstufen der von Miasma bedeckten Gebiete sind unterschiedlich. Während des Erkundungsprozesses werden nach und nach neue Gebiete der Karte freigeschaltet, und die Lage der von Miasma bedeckten Gebiete ist sichtbar. Die Karte wird durch zwei Farben gekennzeichnet. Der blaue Bereich, den Sie für kurze Zeit betreten können, hängt auch von der Fähigkeitsstufe des Charakters ab.

Anchor Point Advent Zehn Empfehlungen für Unternehmenscharaktere für Anfänger Anchor Point Advent Zehn Empfehlungen für Unternehmenscharaktere für Anfänger Feb 20, 2024 pm 02:30 PM

Anchor Arrival ist ein rundenbasiertes 3D-Kartenspiel mit einem hochauflösenden 2D-Thema für Mädchen. Es bietet den Spielern eine reichhaltige und aufregende Kombination von Charakteren, die es zu erkunden und zu erleben gilt Auch neugierige Anfänger. Werfen wir einen Blick auf die Auswahlempfehlung für Anfänger, um zehn Goldmedaillen in Folge zu gewinnen. Die vom Anfängerpool empfohlenen mächtigen Charaktere sind hauptsächlich Singles -Ziel-Donner-Typ-Explosivcharakter. Die Ausgabe ist sehr explosiv und das Erlebnis wird für Neulinge sehr freundlich sein, daher wird dringend empfohlen, es zu wählen. Es wird empfohlen, die Kombination „Alice“ + „Antilope“ für einen 10-Ziehungs-Bonus zu wählen. Alice ist der würdigste Charakter, der das Goldpire-Attribut ausgibt, und ist nicht einmal ein bisschen stärker als die anderen beiden Charaktere im Kartenpool für Anfänger . Alice kann Sonderprüfungen bestehen

Das Erlernen der Stapeleinrückung ist eine Fähigkeit, die PyCharm-Neulinge beherrschen müssen Das Erlernen der Stapeleinrückung ist eine Fähigkeit, die PyCharm-Neulinge beherrschen müssen Dec 30, 2023 pm 12:58 PM

Grundlegende Fähigkeiten für PyCharm-Neulinge: Um die Verwendung von Batch-Einrückungen zu beherrschen, sind spezifische Codebeispiele erforderlich. Übersicht: PyCharm ist eine leistungsstarke integrierte Python-Entwicklungsumgebung (IDE), die viele praktische Tools und Funktionen bietet, um Entwicklern bei der Verbesserung der Effizienz zu helfen. Im täglichen Codierungsprozess müssen wir den Code häufig einrücken, um das Codeformat sauber und schön zu halten. Die von PyCharm bereitgestellte Batch-Einrückungsfunktion kann uns dabei helfen, den Code schnell stapelweise einzurücken und die Codierungseffizienz zu verbessern. In diesem Artikel wird Py untersucht

Ancient Crown-Anfängerleitfaden und Gameplay-Einführung Ancient Crown-Anfängerleitfaden und Gameplay-Einführung Feb 20, 2024 am 11:20 AM

Crown of the Ancients ist ein hochwertiges und strategisches Kartenspiel für Handys, das auf westlichen magischen Abenteuern basiert. Geheime Erkundungen im Spiel, Ruinenabenteuer, nationale Meisterschaften und andere besondere Gameplays warten darauf, von Ihnen erlebt zu werden. Für Anfänger, die schnell mit diesem Spiel beginnen möchten, ist ein Leitfaden für Anfänger unverzichtbar. Heute bringt Ihnen der Herausgeber den entsprechenden Leitfaden, werfen wir einen Blick darauf. Ein Überblick über den Gameplay-Leitfaden für Anfänger in Crown of Ancients und die Eröffnungsschulen: 1. Diamanten-Sammelfluss: Alles konzentriert sich auf das Sammeln von Diamanten, und nachdem Sie das Dorf verlassen haben, beginnen Sie hart zu arbeiten. Mit Ausnahme der Hauptzauberwaffe, drei Schwungradaktivitäten usw., die Diamanten erfordern, werden die anderen ignoriert. Achten Sie nicht auf die Heldenherausforderung. Sie können so viele spielen, wie Sie können , und erzwinge es nicht. Vorteile: Sie müssen nur herumspielen, um Diamanten zu sammeln. Nachdem Sie das Dorf verlassen haben, können Sie schnell auf die neuesten Aktivitäten mit Diamanten zugreifen, neue Serien von Hardware-Helden erhalten und Diamanten zerschlagen.

Welches Element ist Li? Welches Element ist Li? Aug 03, 2023 am 11:19 AM

li ist ein Element in der HTML-Auszeichnungssprache und wird zum Erstellen von Listen verwendet. li stellt ein Listenelement dar, das ein untergeordnetes Element von ul oder ol ist. Die Rolle des li-Tags besteht darin, jedes Element in der Liste zu definieren. In HTML wird das li-Element normalerweise mit dem ul- oder ol-Element verwendet, um eine geordnete oder ungeordnete Liste zu erstellen. Ungeordnete Listen verwenden das ul-Element und Listenelemente werden durch das li-Element dargestellt, während geordnete Listen ebenfalls das ol-Element verwenden li Elementdarstellung.

C vs. C++: Was ist besser für neue Programmierer? C vs. C++: Was ist besser für neue Programmierer? Mar 19, 2024 am 08:30 AM

C-Sprache oder C++: Welche Sprache eignet sich besser für neue Programmierer? Im Zeitalter der rasanten Entwicklung moderner Technologie ist das Erlernen des Programmierens eine immer beliebtere Wahl, sei es als Teil der beruflichen Entwicklung oder als Möglichkeit, die Fähigkeiten des logischen Denkens zu verbessern. Unter vielen Programmiersprachen sind C und C++ beide sehr klassische und repräsentative Sprachen. Viele Menschen sind verwirrt darüber, wie sie C-Sprache oder C++ als Programmiersprache für Einsteiger wählen sollen. Ist die C-Sprache also besser für Programmieranfänger geeignet oder ist C++ besser geeignet? Benötigen Sie spezifische Codebeispiele dazu

Meistern Sie schnell die Einführungsfähigkeiten des Phantombestiens Palu Meistern Sie schnell die Einführungsfähigkeiten des Phantombestiens Palu Jan 23, 2024 am 08:45 AM

Phantom Beast Parlu ist ein Open-World-Survival-Spiel, das den Online-Mehrspielermodus unterstützt. Das Spiel bietet zahlreiche Möglichkeiten, Kreaturen zu sammeln, und die Spieler können sich auf verschiedene Erkundungstouren wie Kampf, Bau und Überleben einlassen. Für unerfahrene Spieler ist es sehr wichtig, die Bedienfähigkeiten und den Gameplay-Inhalt des Spiels zu beherrschen. Hier sind einige Strategietipps für Anfänger als Referenz. 1. Grundlegende Vorgänge erlernen: Bevor Sie mit dem Spiel beginnen, wird empfohlen, die grundlegenden Vorgänge des Spiels zu erlernen, einschließlich Bewegung, Angriff, Sammlung usw. Dies ermöglicht eine bessere Kontrolle über die Operationen des Charakters. 2. Erkunden Sie die Welt: Die Welt von Phantom Beast Parlu ist sehr groß, mit vielen versteckten Orten und Ressourcen, die darauf warten, von den Spielern entdeckt zu werden. Haben Sie keine Angst, Risiken einzugehen, versuchen Sie, jede Ecke zu erkunden und das Phantom Beast Pallu zu finden. Kurztipps für Neulinge: Wählen Sie einen

Was ist li in html Was ist li in html Nov 19, 2021 pm 03:31 PM

In HTML lautet der vollständige englische Name „list item“, was „Listenelement“ bedeutet. Es handelt sich um ein Element-Tag, das ein Listenelement definiert. Tag „<li>“ Verfügbar in der geordneten Liste „<ol>“ und der ungeordneten Liste „<ul>“.

See all articles