菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
9
0

css如何实现li不换行显示

原创
05/13 14:22
阅读数 11064

实现方法: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不换行显示的详细内容,更多请关注其它相关文章!

发表评论

0/200
9 点赞
0 评论
收藏
为你推荐 换一批