css如何实现li不换行显示-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

css如何实现li不换行显示

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

本教程操作环境：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视频教程

以上就是css如何实现li不换行显示的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~