ul 和 li 到底是神马关系

不懂=========

============所以先mark了===========


接触html和css也有些时日了,但是很多简单的东西就是想不明白,在制作导航的练习中,我们经常这样写:

#nav ul{
width:960px;
height:35px;
list-style:none;/*清楚列表前面的大黑圆点*/
}
#nav ul li{
float:left;
line-height:35px;
text-align:center;

}

结果我常常是把list-style:none;写在#nav ul li中去,结果浏览也是对的,我查了css手册,list-style是ul的属性……怎么回事呢?

### HTML `ul` `li` 标签使用教程 #### 一、基本结构 在HTML文档中,`<ul>`代表无序列表(unordered list),而`<li>`则表示列表项(list item)。通常用于创建项目列表。下面是一个简单的例子来展示如何构建一个基础的无序列表[^3]。 ```html <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> ``` 此代码片段会渲染成带有圆点标记的三个条目组成的垂直列表。 #### 二、去除默认样式 为了移除`<ul><li>`前的小黑点以及它们之间的空白区域,在CSS文件或者页面内的`<style>`标签里加入特定的选择器规则可以实现这一点[^1]: ```css ul { list-style-type: none; /* 移除前面的小图标 */ padding-left: 0px; /* 清除左边距 */ } ``` 这段CSS将会使上述示例中的水果名称不再伴有任何装饰性的符号,并紧贴左侧边界排列。 #### 三、控制水平布局及其间隔调整 当希望将多个`<li>`元素横向并列放置时,可以通过设置浮动属性或将display设为inline-block等方式达成目的;与此同时,利用`margin`或`padding`属性可方便地调节相邻两项间的距离大小[^2]。 以下是通过float方式实现水平分布的例子: ```html <style> .horizontal-list li{ float:left; margin-right:1em;/* 设置右边框距 */ } </style> <ul class="horizontal-list"> <li>链接A</li> <li>链接B</li> <li>链接C</li> </ul> ``` 另外一种更现代的方法是采用flexbox布局模式来进行更加灵活多变的设计安排。 #### 四、嵌套列表支持 值得注意的是,不仅可以在单层`<ul>`内部添加若干个`<li>`作为其直接子节点,还允许在一个已有的`<li>`之内再引入新的`<ul>`容器,从而形成层次化的数据展现形式。 例如: ```html <ul> <li>主要分类 <ul> <li>次级类别1</li> <li>次级类别2</li> </ul> </li> <!-- 更多项 --> </ul> ``` 这样就可以轻松表达出具有父子关系的信息架构了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值