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 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7316
9
1625
14
1349
46
1261
25
1208
29
초보자에게 가이드를 제공하기 위한 Mist Lock Kingdom 플레이 팁
Jan 28, 2024 pm 03:33 PM
Mistlock Kingdom은 플레이어가 Sons of Fire로 플레이하여 생존하고 탐험할 수 있는 오픈 월드 게임입니다. 이 게임은 액션 RPG 도전의 독특한 엔터테인먼트를 결합하여 플레이어에게 끝없는 놀라움과 즐거움을 선사합니다. 게임에서 플레이어는 자원, 환경, 무기 등을 탐색할 수 있습니다. 일부 초보 플레이어는 게임을 시작하는 방법에 대해 궁금해할 수 있습니다. 이 소개 및 공유에서는 관련 시작 가이드를 제공할 것입니다. 안개 자물쇠 왕국 초보자를 위한 팁: 독기가 덮힌 지역의 위험 수준은 다릅니다. 탐사 과정에서 지도의 새로운 지역이 점차 잠금 해제되고 독기가 덮힌 지역의 위치를 확인할 수 있습니다. 맵은 두 가지 색상으로 구분됩니다. 파란색 영역은 짧은 시간 동안 입장할 수 있으며, 캐릭터의 능력치에 따라 머무를 수 있는 시간도 달라집니다.
앵커포인트 강림절 초보자를 위한 회사 캐릭터 추천 10가지
Feb 20, 2024 pm 02:30 PM
Anchor Arrival은 고화질 미소녀 2차원 테마를 갖춘 3D 턴제 카드 게임으로, 플레이어가 탐색하고 경험할 수 있는 풍부하고 흥미로운 캐릭터 조합을 제공합니다. 초보자도 궁금합니다.풀에서 추천하는 강력한 캐릭터는 무엇일까요? 앵커 포인트 강림은 초보자 풀의 강력한 캐릭터 추천을 살펴보겠습니다. 앨리스는 주로 단일 대상 천둥형 폭발 캐릭터입니다. 출력이 매우 폭발적이며 경험이 신규 사용자에게 매우 친숙하므로 선택하는 것이 좋습니다. 10골드 뽑기에는 "앨리스" + "영양" 조합을 선택하는 것이 좋습니다. 앨리스는 금파이어 속성을 출력하기에 가장 적합한 캐릭터이며, 초보자 카드 풀의 다른 두 캐릭터보다 조금도 강하지 않습니다. 앨리스는 스페셜을 통과할 수 있습니다
일괄 들여쓰기 사용법을 배우는 것은 PyCharm 초보자가 반드시 숙달해야 하는 기술입니다.
Dec 30, 2023 pm 12:58 PM
PyCharm 초보자를 위한 필수 기술: 일괄 들여쓰기 사용을 마스터하려면 특정 코드 예제가 필요합니다. 개요: PyCharm은 개발자가 효율성을 향상하는 데 도움이 되는 많은 실용적인 도구와 기능을 제공하는 강력한 Python 통합 개발 환경(IDE)입니다. 일상적인 코딩 과정에서 우리는 코드 형식을 깔끔하고 아름답게 유지하기 위해 코드를 들여쓰기해야 하는 경우가 많습니다. PyCharm에서 제공하는 일괄 들여쓰기 기능을 사용하면 코드를 빠르게 일괄 들여쓰기하고 코딩 효율성을 높일 수 있습니다. 이 기사에서는 Py를 살펴보겠습니다.
고대 왕관 초보자 가이드 및 게임 플레이 소개
Feb 20, 2024 am 11:20 AM
Crown of the Ancients는 서양의 마법 모험을 기반으로 한 고품질 전략 카드 모바일 게임입니다. 게임 내 비밀 탐험, 폐허 모험, 전국 챔피언십 및 기타 특별한 게임 플레이가 여러분의 경험을 기다리고 있습니다. 따라서 초보 플레이어가 이 게임을 빨리 시작하고 싶다면 초보 가이드가 필수입니다. 오늘 편집자가 관련 가이드를 가져올 것이므로 살펴보겠습니다. 고대 왕관 초보자 가이드, 게임 플레이 및 지역 개방 스타일 개요: 1. 다이아몬드 축적 흐름: 모든 것이 다이아몬드 축적에 중점을 두고 있으며, 마을을 떠난 후 열심히 일하기 시작합니다. 다이아몬드가 필요한 주요 마법 무기, 세 가지 플라이휠 활동 등을 제외하고 나머지는 무시됩니다. 주요 초점은 그 중 하나에 집중하지 말고 최대한 많이 싸울 수 있습니다. , 그리고 강요하지 마세요. 장점: 다이아몬드를 모으기 위해 장난만 치면 됩니다. 마을을 떠난 후에는 다이아몬드로 최신 활동에 빠르게 액세스하고, 새로운 하드웨어 영웅 시리즈를 얻을 수 있으며, 다이아몬드가 깨질 수 있습니다.
C 대 C++: 초보 프로그래머에게 더 나은 것은 무엇입니까?
Mar 19, 2024 am 08:30 AM
C 언어 또는 C++: 새로운 프로그래머에게 더 적합한 것 현대 기술이 빠르게 발전하는 시대에 경력 개발의 일환으로든 논리적 사고 능력을 향상시키기 위한 방법으로 프로그래밍을 배우는 것이 점점 더 인기 있는 선택이 되었습니다. 많은 프로그래밍 언어 중에서 C 언어와 C++는 모두 매우 고전적이고 대표적인 언어입니다. 많은 사람들이 입문자용 프로그래밍 언어로 C 언어 또는 C++를 선택하는 방법에 대해 혼란스러워합니다. 그렇다면 프로그래밍 초보자에게 C 언어가 더 적합한가요, 아니면 C++가 더 적합한가요? 특정 코드 예제가 필요합니다.
리(li)는 어떤 요소인가요?
Aug 03, 2023 am 11:19 AM
li는 HTML 마크업 언어의 요소이며 목록을 만드는 데 사용됩니다. li는 ul 또는 ol의 하위 요소인 목록 항목을 나타냅니다. li 태그의 역할은 목록의 각 항목을 정의하는 것입니다. HTML에서 li 요소는 일반적으로 ul 또는 ol 요소와 함께 사용되어 순서가 있거나 순서가 지정되지 않은 목록을 만듭니다. 순서가 지정되지 않은 목록은 ul 요소를 사용하고 목록 항목은 li 요소로 표시되는 반면, 순서가 지정된 목록은 ol 요소를 사용합니다. li 요소 표현.
HTML에서 Li는 무엇입니까?
Nov 19, 2021 pm 03:31 PM
HTML에서 li의 전체 영어 이름은 "목록 항목"을 의미합니다. 이는 목록 항목을 정의하는 요소 태그입니다. 구문은 "<li>list item content</li>"입니다. <li>" 태그 정렬된 목록 "<ol>" 및 정렬되지 않은 목록 "<ul>"에서 사용할 수 있습니다.
환상수 팔루의 입문 스킬을 빠르게 익히세요
Jan 23, 2024 am 08:45 AM
Phantom Beast Parlu는 온라인 멀티플레이를 지원하는 오픈 월드 서바이벌 게임입니다. 이 게임에는 생물을 수집하는 다양한 방법이 있으며 플레이어는 전투, 건설, 생존 등 다양한 탐험에 참여할 수 있습니다. 초보 플레이어의 경우 게임의 조작 기술과 게임 플레이 콘텐츠를 익히는 것이 매우 중요합니다. 참고할 수 있는 초보자 전략 팁은 다음과 같습니다. 1. 기본 조작 배우기: 게임을 시작하기 전에 이동, 공격, 수집 등 게임의 기본 조작을 배우는 것이 좋습니다. 이를 통해 캐릭터의 작업을 더 잘 제어할 수 있습니다. 2. 세계 탐험: Phantom Beast Parlu의 세계는 매우 광대하며, 숨겨진 장소와 자원이 플레이어가 발견하기를 기다리고 있습니다. 위험을 두려워하지 말고 모든 구석구석을 탐험해 보세요. 초보자를 위한 빠른 팁 1. 베이스 사이트 선택, 팬텀 비스트 팔루에서 먼저 선택하세요.
