制作有序列表，用有序列表+CSS制作的问题！
用有序列表ol，li+CSS制作有序列表，想问各位，如何就是横向的，如何就是竖向的了啊？我用的CSS外部样式，应该在css文件里边操作吧，是只要在li里边加上displa...
用有序列表ol，li+CSS制作有序列表，想问各位，如何就是横向的，如何就是竖向的了啊？我用的CSS外部样式，应该在css文件里边操作吧，是只要在li里边加上display:block;和float:left;就是定义横向列表了吗？ 还是说给句整体设置的width和height，就能自动排列成横向和竖向啊？请高手们指导下在下！
展开
4个回答
展开全部
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了啊
不需要刻意记，书上的东西不要只看，最好照着练习下，不死记，记住或搞懂原理，慢慢的你做多了就不用翻书了。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
AiPPT
2024-09-19 广告
随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图...
点击进入详情页
本回答由AiPPT提供
展开全部
列表默认的显示样式是坚向向，如果你觉得自己没有对它进行控制，但是它却显示成横向的了，那请你检查一下，是不是有继承的属性。如果是因为继承而显示成横向的，就加个clear:both；就行了。
如果要显示成横向的，给LI加一个float:left就行了，不用display:block
一般横向的不需要列表的前标，还需要给OL加一个{ list-style:none;}的属性
如果要显示成横向的，给LI加一个float:left就行了，不用display:block
一般横向的不需要列表的前标，还需要给OL加一个{ list-style:none;}的属性
追问
那为什么float:left要加在li里，不加在ol里啊？clear：both；我知道是清楚浮动，可还是一知半解，什么情况下需要清除浮动呢？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
竖向如下:
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<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" />
<!-- TemplateBeginEditable name="doctitle" -->
<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>
你自己看下
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<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" />
<!-- TemplateBeginEditable name="doctitle" -->
<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>
你自己看下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
竖向不需要设置默认就是竖向的，横向要加float:left才可以，display这个属性看实际需要了，不是必须得
追问
那为什么float:left要加在li里，不加在ol里啊？
追答
做导航条的时候float:left是针对标签而言的，非之类的标签
假如你写了两个标签，对标签使用float:left的话，你会发现浏览器会将作为一个整体去向左横放，但还是竖着放的 。
这个区别通过分别给和加border属性就可以看出来了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
