站长资讯网
最全最丰富的资讯网站

css如何实现li不换行显示

实现方法:1、使用display属性将li转成行内或是行内块标签,只需要给li设置“display:inline|inline-block”样式即可;2、使用float属性进行浮动,只需要给元素设置“float:left”样式即可。

css如何实现li不换行显示

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

方法一:

display方法, 需要将li转换成行内标签或者行内块标签

<html> <head>     <style type="text/css">         li {               display: inline;  <-- 或者inline-block -->               list-style:none;                margin:0 20px;         }         div {               display: none;         }     </style> </head> <body> <ul>   <li>aa</li>   <li>bb</li>   <li>cc</li>   <li>dd</li> </ul> </body> </html>

方法二:

选择左浮动方式, float:left;

<html> <head>     <style type="text/css">         li {               float: left;                list-style:none;                margin:0 20px;         }         div {               display: none;         }     </style> </head> <body> <ul>   <li>aa</li>   <li>bb</li>   <li>cc</li>   <li>dd</li> </ul> </body> </html>

推荐学习:css视频教程

赞(0)
分享到: 更多 (0)

网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号