列表 < 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;
- }
显示结果:
但是使用了 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>
效果:
等等, 为什么 li 之间有空隙???
解决办法是: 把 li 写成一行
- <ul>
- <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>
- </ul>
对, 就是写成这样子 (不知道是不是 bug)
这个方法有一个弊端: li 转为内联元素后, width,height 就无效了, 只能用 padding 来撑开宽高. 也有一些不便. 自己根据需要取舍吧.
更多 CSS 的相关知识, 可访问: web 前端自学 https://www.html.cn/ !!
来源: http://www.css88.com/qa/css3/18108.html