css如何实现li不换行显示

2021-05-17 07:38:05

本教程操作环境: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>