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>

猜你喜欢

转载自www.cnblogs.com/xiaoneng/p/10571454.html