<html><head><style type="text/css"> ul{list-style-type:none;width:100%;padding:0;margin:0;float:left;} a{text-decoration:none;float:left; width:120px;font-size:15px;border-right:1px white solid;color:white;padding:3px 8px;} a:hover{ } li {display:inline} </style></head> <body><ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul> <p>在上面的例子中,我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素(元素前后没有换行)。这样就可以使列表排列成一行。ul 元素的宽度是 100%,列表中的每个超链接的宽度是 7em(当前字体尺寸的 7 倍)。我们添加了颜色和边框,以使其更漂亮。</p> </body></html>
li{display:inline;}的作用是把li转换成内联元素显示。 li默认为块级元素,一个li会独自占据一行,display:inline会把块级元素转换成内联元素,内联元素大小会根据内容多少而变换,且不会自动换行。 把内联元素转换成块级元素可以用display:block。
原文地址:https://www.cnblogs.com/weikeqi/p/9311720.html
时间: 2024-10-10 20:26:26