css列表怎么横着排列


本文摘自PHP中文网,作者V,侵删。

css列表横着排列的方法:可以利用【display:inline】属性把【<li>】标签设定为内联元素来实现横向排列效果。display属性规定了元素应该生成的框的类型。

思路:

设定<li>标签的display:inline,把<li>设定为内联元素来实现横向排列的效果。

(推荐教程:css视频教程)

属性介绍:

display 属性规定元素应该生成的框的类型。

具体代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!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>

效果:

阅读剩余部分

相关阅读 >>

使用纯css画一个圆环(代码示例)

css该如何去掉背景颜色呢

怎样在css里更改字体大小

邮件不支持css怎么办

css怎么实现鼠标选中文字后改变背景色

html中图片显示方式-----img与background的区别

css如何绘制双箭头(代码示例)

css图片怎么引用

详细介绍css中的数学表达式calc()

css怎么设置边框内颜色

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...