div ul li新手初级问题,有图有代码,高手来看看谢谢._html/css_WEB-ITnose
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>
如果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>那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>那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;}
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
玩霧鎖王國的秘籍給新手指引
Jan 28, 2024 pm 03:33 PM
霧鎖王國是一款開放世界的遊戲，玩家可以扮演火焰之子進行生存和探索。遊戲融合了動作RPG挑戰的特色娛樂，為玩家帶來無盡的驚喜和歡樂。在遊戲中，玩家可以探索資源、環境和武器等內容。對於一些新手玩家，可能會對如何上手遊戲感到好奇。在這期的介紹和分享中，我們將為大家提供一些相關的入門指南。霧鎖王國新手入門技巧被瘴氣籠罩區域的危險等級不同在探索的過程中會逐漸解鎖地圖的新區域，並且能看到被瘴氣籠罩區域的位置。地圖上會以兩種顏色來區分，藍色區域是可以短暫進入的，根據角色能力等級高低，可停留的時間也會有所區別
錨點降臨新手十連角色推薦
Feb 20, 2024 pm 02:30 PM
錨點降臨是一款擁有高畫質美少女二次元主題的3D回合卡牌遊戲，提供了豐富角色的精彩組合可供玩家來探索和體驗，擁有許多精品陣容的強力搭配，新人玩家也是好奇新手池有哪些強力角色推薦，以下來看看新手十連金的選擇參考!錨點降臨新手池強力角色推薦第一個十連選艾莉絲，她主要是一個單體雷系爆發角色，單體輸出非常爆炸的，對新人的體驗也會是非常的友善的，所以十分推薦選取。 10抽必金建議選擇「艾莉絲」+「羚角」的組合，艾莉絲是最值得選的金皮雷屬性輸出角色，比新手卡池中的另外2個角色要強得不是一星半點。艾莉絲可以透過特
學會利用批次縮排是PyCharm新手必須掌握的技能
Dec 30, 2023 pm 12:58 PM
PyCharm新手必備技能：掌握批次縮排的使用方法，需要具體程式碼範例概述：PyCharm是一款功能強大的Python整合開發環境（IDE），它提供了許多實用的工具和功能，幫助開發者提高效率。在日常的編碼過程中，我們經常需要將程式碼進行縮進，保持程式碼的格式整齊美觀。而PyCharm提供的批次縮排功能可以幫助我們快速地將程式碼進行批次縮排，提高編碼效率。本文將探討Py
上古王冠新手攻略玩法介紹
Feb 20, 2024 am 11:20 AM
上古王冠是以西方魔幻冒險為背景，高品質有策略的卡牌手遊。遊戲內祕境探險、遺跡大冒險、全民冠軍賽等特色玩法等你來體驗。那麼對於新手玩家來說，想要快速上手這個遊戲當然少不了新手攻略了，今天小編就給大家帶來其相關的攻略，一起看看吧。上古王冠新手攻略玩法一覽一、開區流派：1.攢鑽孔：一切以攢鑽為主，出村後再發力。除了主要的神兵、三個飛輪活動等需要花鑽，其他一概不管，主打一個擺爛，英雄挑戰不必理會，能打多少就多少，不強求。優點：只要擺爛攢鑽，出村後能有鑽石快速接入最新活動，拿新系列五金英雄，鑽石斷檔概
li是什麼元素
Aug 03, 2023 am 11:19 AM
li是HTML標記語言中的元素，用於建立清單。 li代表列表項，它是ul或ol的子元素，li標籤的作用是定義列表中的每個項目。在HTML中，li元素通常與ul或ol元素配合使用來建立有序或無序列表，無序列表使用ul元素，列表項以li元素表示，而有序列表則使用ol元素，同樣也用li元素表示。
C語言和C++：哪個比較適合程式新手
Mar 19, 2024 am 08:30 AM
C語言和C++：哪個更適合程式設計新手在現代科技高速發展的時代，學習程式設計已經成為一個越來越受歡迎的選擇，無論是作為職業發展的一部分，還是作為提高邏輯思考能力的方式。而在眾多程式語言中，C語言和C++都是非常經典且具代表性的語言，許多人對於如何選擇C語言還是C++來作為入門程式語言存在著疑惑。那麼，究竟是C語言比較適合程式新手，還是C++比較適合呢？需要具體程式碼範例來
迅速掌握幻獸帕魯的入門技巧
Jan 23, 2024 am 08:45 AM
幻獸帕魯是一款開放世界生存遊戲，支援多人連線。遊戲中有豐富的收集生物玩法，玩家可以進行戰鬥、建造和生存等多種探索。對於新手玩家來說，掌握遊戲的操作技巧和玩法內容是很重要的。以下是一些新手攻略技巧供參考。 1.學習基本操作：在開始遊戲前，建議先學習遊戲的基本操作，包括移動、攻擊、採集等。這樣可以更好地掌握角色的操作。 2.探索世界：幻獸帕魯的世界非常廣闊，有許多隱藏的地方和資源等著玩家去發現。不要害怕冒險，盡量探索每個角落，尋找幻獸帕魯新手快速上手技巧一、基地選址，以平坦為先在幻獸帕魯中，選擇一個
html中li是什麼
Nov 19, 2021 pm 03:31 PM
在html中，li的英文全稱為“list item”，意思為“清單項目”，是定義清單項目的元素標籤，語法“<li>清單項目內容</li>”；“<li>”標籤可用在有序列表“<ol>”和無序列表“<ul>”中。
