HTML中的ul标签

UL格式:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ul是无序列表,每一个li前面有个点。如果想要去掉无序列表的“.”,添加list-style-type=none属性,防止list-style的其他属性失效。eg.list-style-image。

OL格式:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

ol是有序列表,序列号类型由type属性控制,type属性值分别为:1、a、A、I、i。序列号的开始值由属性start控制,start属性值为type所属类型值的范围值。

问题描述:

在使用ul制作下拉菜单时,要给菜单栏(即ul)加上背景色,发现background-color没起作用。查看ul元素盒子大小,发现盒子高度为0。

解决方案: 由于ul没有直接制定高度,其高度根据里面的li来伸缩。由于li设置了向左浮动,因此得清除浮动才能显示背景色。
  1. 清除浮动可以给ul添加一个overflow:hidden的样式。
  2. 或者在</ul>前面加入一个清除浮动的div,即

<div style="clear: both;"></div>

 CSS:

ul{
     list-style: none;
     background-color: gray;
}
ul li{
       float: left;
       padding: 0 5px;
       border-left: solid 1px black;
}

 

HTML:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

相关推荐:

如何利用Python Django的Include标签拆分大型模板文件?

{%include%}能拆分模板但需注意变量作用域、路径规则(仅从templates根目录解析)和循环中重复渲染的性能问题,非万能解法。 直接说结论:用{%include%}能拆分模板,但必须注意变量作用域、路径解析规则和循环内重复渲染的性能陷阱——它不是“无脑切文件”的万能解药。 include标...

如何在 VB.NET 中使用 Selenium 打开 Chrome 新标签页

本文介绍在VB.NET中通过SeleniumWebDriver可靠打开Chrome浏览器新标签页的正确方法,摒弃不稳定的SendKeys模拟按键方案,推荐使用原生JavaScript执行window.open()并切换窗口句柄的稳定实践。 本文介绍在vb.net中通过seleniumwebdrive...

如何使用 Python pdfkit 基于 HTML 生成多页 PDF

本文详解如何在Django项目中利用pdfkit将多个HTML内容块分别渲染为独立PDF页面,核心是通过CSS的page-break-after:always实现精准分页。 本文详解如何在django项目中利用pdfkit将多个html内容块分别渲染为独立pdf页面,核心是通过css的`page-b...

如何为 DataFrame 创建基于嵌套列表归属关系的分类标签列

本文介绍一种高效、向量化的方法,使用字典映射将dataframe中某列的值(如姓名)匹配到预定义的多个名单列表中,并为其分配对应的层级编号(如tier1/tier2),避免显式循环,适用于数百行数据与十余个分组的场景。 本文介绍一种高效、向量化的方法,使用字典映射将dataframe中某列的值(如姓...