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

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:01 PM

li初级新手高手

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>

而且我用了,没效果啊,还是没变化

有效果 ,但那个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;}

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

玩转雾锁王国的秘籍给新手指引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.攒钻流：一切以攒钻为主，出村后再发力。除了主要的神兵、三个飞轮活动等需要花钻，其他一概不管，主打一个摆烂，英雄挑战不必理会，能打多少就多少，不强求。优点：只需摆烂攒钻，出村后能有钻石快速接入最新活动，拿新系列硬件英雄，钻石断档概

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的英文全称为“list item”，意思为“列表项”，是一个定义列表项目的元素标签，语法“<li>列表项内容</li>”；“<li>”标签可用在有序列表 “<ol>”和无序列表“<ul>”中。

迅速掌握幻兽帕鲁的入门技巧Jan 23, 2024 am 08:45 AM

幻兽帕鲁是一款开放世界生存游戏，支持多人联机。游戏中有丰富的收集生物玩法，玩家可以进行战斗、建造和生存等多种探索。对于新手玩家来说，掌握游戏的操作技巧和玩法内容是很重要的。下面是一些新手攻略技巧供参考。1.学习基本操作：在开始游戏之前，建议先学习游戏的基本操作，包括移动、攻击、采集等。这样可以更好地掌握角色的操作。2.探索世界：幻兽帕鲁的世界非常广阔，有许多隐藏的地方和资源等待玩家去发现。不要害怕冒险，尽量探索每一个角落，寻找幻兽帕鲁新手快速上手技巧一、基地选址，以平坦为先在幻兽帕鲁中，选择一个

See all articles