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不换行显示的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！