css 列表怎么横着排?

列表<ul><dl>等默认是纵向排列,但有时列表需要横向排列。那么列表<ul><dl>怎么横着排?下面本篇文章给大家介绍一下使用css让列表横着排的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

方法1:使用float属性实现

在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐,

例如:

HTML中:

<ul class="ui">
    <li><a href="#" >首页</a></li>
    <li><a href="#">登录</a></li>
    <li><a href="#">注册</a></li>
    <li><a href="#">服务大厅</a></li>
    <li><a href="#">需求大厅</a></li>
</ul>

CSS:

.ui{
                 width:700px;
                 height:50px;
                 list-style: none;
                 margin:0;
                 padding:0;
             }
        .ui li{
            width:70px;
               margin:0 10px;
            float: left;/*该处换为display:inline-block;同样效果*/

        }

        .ui li a{
            width:70px;
            height:50px;
            padding:0 20px;
            font-size: 12px;
            line-height:50px;
            background: red;
            display: inline-block;
        }

显示结果:

1.jpg

但是使用了float也通常会引发一些排版问题。下面来介绍另一种方法。

方法2:设定<li>标签的display:inline样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表横向排列的另一种方法</title>
<style type="text/css">
ul li{display:inline;background:#F93; padding:5px;}}
</style>
</head>

<body>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
</body>
</html>

效果:

2.jpg

等等,为什么li之间有空隙???

解决办法是:把li写成一行

<ul>
    <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>
</ul>

对,就是写成这样子(不知道是不是bug)

3.jpg

这个方法有一个弊端:li转为内联元素后,width、height就无效了,只能用padding来撑开宽高。也有一些不便。自己根据需要取舍吧。

更多css的相关知识,可访问:web前端自学!!

以上就是css 列表怎么横着排?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏