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>aali>
  <li>bbli>
  <li>ccli>
  <li>ddli>
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>aali>
  <li>bbli>
  <li>ccli>
  <li>ddli>
ul>
body>
html>

 

自己写的小例子:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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;
            
        }
        ul {float:right; margin-right:25%;}

    
    style>
head>
<body>

<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>


<div>

div>


<div>

div>

body>
html>

 

你可能感兴趣的:(Html中怎么用CSS让ul中多个li标签不换行横排显示)