css如何实现li不换行显示

来自:互联网
时间:2021-04-23
阅读:

方法一:

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>
返回顶部
顶部