Html中怎么用CSS让ul中多个li标签不换行横排显示

时间：2024-04-16 10:08:58

 

布局

通常有三种方式

{

　1. position

　2. float： left --》 其次是这个

　3. block： inline-block  --》 他们推荐我用这个

}

具体描述

 

由于好久没有写html了， 早已忘的一干二净， 今天忽然想写html，需要在top写个导航条， 但是又不记得li怎么变成行内块标签了， 只能去请教一下前端的同事了

自己找到的答案是display的方法

他告诉我的是float方法

 

方法一：

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>

 

自己写的小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ac-globalnav {
             position: absolute;
             top: 0;
             right: 0;
             left: 0;
             z-index: 9999;
             display: block;
             margin: 0;
             width: 100%;
             min-width: 1024px;
             height: 88px;
             max-height: 100px;
             background: #333;
             background: rgba(0,0,0,0.8);
             font-size: 17px;
             user-select: none;
         }

        li {
              display: inline;
              list-style:none;
              margin:0 35px 0 35px;
              color: #fff;
              line-height:58px;
              cursor:pointer;

        }

        li:hover{
            color: red;
            <!--想换加入背景色的话， 可以使用background-->
        }
        ul {float:right; margin-right:25%;}

    
    </style>
</head>
<body>
<!--top-->
<div>
    <div id="ac-globalnav">
        <ul>
            <li>首页</li>
            <li>简介</li>
            <li>自学教程</li>
            <li>指法表</li>
            <li>曲谱</li>
            <li>萧选购维护</li>
            <li>洞箫音乐</li>

            <li></li>
        </ul>
    </div>

</div>

<!--body-->
<div>

</div>

<!--button-->
<div>

</div>

</body>
</html>

 

相关文章