zoukankan      html  css  js  c++  java
  • Html中怎么用CSS让ul中多个li标签不换行横排显示

    布局

    通常有三种方式

    {

     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>
  • 相关阅读:
    Lambda
    Guava
    创建数据库时报错 'str' object has no attribute 'decode'
    服务器并发测试(jmeter)
    Mosquitto 创建用户自动输入密码
    menuconfig 语法与用法
    Django操作mongodb
    mqtt mosquitto 安装与使用
    python 使用mongodb数据库
    djangorestframework token 认证
  • 原文地址:https://www.cnblogs.com/renfanzi/p/9259330.html
Copyright © 2011-2022 走看看