制作有序列表,用有序列表+CSS制作的问题!

发布网友发布时间：2023-07-11 17:26

共4个回答

热心网友时间：2024-12-02 07:11

li加上float浮动，我觉得一般做li横向，display这个属性跟楼上相反，li上面是必须加的(或者给li里面的内容加也行)，加了再给li或li里面的内容加上固定宽度。不然li不加display无法设置固定宽度，li的宽度就由里面的内容决定了，那么无论你做横向的导航条也好，还是做一个5行2列的新闻列表也好，没有li的宽度就不好做排版对齐或导航条上的a:hover按钮等效果，而一般网页排版中都会有排版li对齐这些需求追问那为什么float:left要加在li里，不加在ol里啊？
a:hover按钮等效果这些我都没记住… 但是我用的时候能从书上找到，这些需要记吗？

追答li默认是竖着排列的，你要让li横着排就要让li浮动，要让li浮动当然是在li上面加float了啊
不需要刻意记，书上的东西不要只看，最好照着练习下，不死记，记住或搞懂原理，慢慢的你做多了就不用翻书了。

热心网友时间：2024-12-02 07:11

列表默认的显示样式是坚向向，如果你觉得自己没有对它进行控制，但是它却显示成横向的了，那请你检查一下，是不是有继承的属性。如果是因为继承而显示成横向的，就加个clear:both；就行了。
如果要显示成横向的，给LI加一个float:left就行了，不用display:block
一般横向的不需要列表的前标，还需要给OL加一个{ list-style:none;}的属性追问那为什么float:left要加在li里，不加在ol里啊？clear：both；我知道是清楚浮动，可还是一知半解，什么情况下需要清除浮动呢？

热心网友时间：2024-12-02 07:12

竖向如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=GB2312" />

<title>test</title>
<style>
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li a:hover {color:#fff; background:#36f;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">zero dollars</a></li>
<li><a href="#" >wrapping text</a></li>
<li><a href="#" >styled form</a></li>
<li><a href="#" >active focus</a></li>
<li><a href="#">HOVER/CLICK ></a></li>
</ul>
</div>
</body>
<html>

横向如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=GB2312" />

<title>test</title>
<style>
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li:hover a {color:#fff; background:#36f;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">zero dollars</a></li>
<li><a href="#" >wrapping text</a></li>
<li><a href="#" >styled form</a></li>
<li><a href="#" >active focus</a></li>
<li><a href="#">HOVER/CLICK ></a></li>
</ul>
</div>
</body>
<html>

你自己看下

热心网友时间：2024-12-02 07:12

竖向不需要设置默认就是竖向的，横向要加float:left才可以，display这个属性看实际需要了，不是必须得追问那为什么float:left要加在li里，不加在ol里啊？

追答做导航条的时候float:left是针对标签而言的，非之类的标签
假如你写了两个标签，对标签使用float:left的话，你会发现浏览器会将作为一个整体去向左横放，但还是竖着放的。
这个区别通过分别给和加border属性就可以看出来了