布局

通常有三种方式

{

　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>

Html中怎么用CSS让ul中多个li标签不换行横排显示的更多相关文章

  1. HTML知识点总结之ul，ol，li标签

    HTML列表分为有序列表,无序列表和描述列表.我们常用的是有序列表(ol)与无序列表(ul). 有序列表 <ol>标签就可以定义一个有序列表,之所以称其为有序列表,是因为可以使列表具有排序 ...

  2. CSS解决ul下面最后一个li的margin

    1.运用css3的nth-child(3n): <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  3. 通过jquery获取ul中第一个li的属性

    当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修 ...

  4. Javascript DOM 02 在<ul>中创建、删除 <li>

    创建DOM元素 createElement(标签名)  创建一个节点 appendChild(节点)  追加一个节点 例子:为ul插入li 插入元素 insertBefore(节点, 原有节点)  在 ...

  5. 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  6. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  7. 多个ul中第一个li获取定位

    如果我们只是获取一个ul中的第一个li的话,那么我们可以这样写: $("ul li:first"); $("ul li").eq(0); $("ul ...

  8. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  9. 选中多个<ul>中的第一个<li>方法

    获取第一个ul中的第一个li标签的方法: //获取第一个ul中的第一个li /* $("ul li:first").css("background"," ...

随机推荐

  1. elasticsearch 索引延迟 一致性问题等

    https://www.elastic.co/guide/en/elasticsearch/guide/current/near-real-time.html https://www.elastic. ...

  2. redis使用日志（4）：如何让外部服务器访问

    开启redis 允许外网IP 访问 在 Linux 中安装了redis 服务,当在客户端通过远程连接的方式连接时,报could not connect错误. 错误的原因很简单,就是没有连接上redis ...

  3. Custom Sublime Text Build Systems For Popular Tools And Languages

    Sublime Text is currently the text editor of choice for a number of developers in the open-source co ...

  4. 2015-06学习总结——c++

    在工作快三年的时候,突然想到我需要凝练下自身的知识体系.从大一开始接触c++,差不多快8年了.想想过去走过的学习之路,很简单,也很曲折. 经历了从一无所知——入门——应用——修修补补的过程,到现在可以 ...

  5. Python3.5爬取豆瓣电视剧数据并且同步到mysql中

    #!/usr/local/bin/python # -*- coding: utf-8 -*- # Python: 3.5 # Author: zhenghai.zhang@xxx.com # Pro ...

  6. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. 7个华丽的基于Canvas的HTML5动画

    说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...

  8. 【Math】证明：实对称阵属于不同特征值的的特征向量是正交的

    证明:实对称阵属于不同特征值的的特征向量是正交的. 设Ap=mp,Aq=nq,其中A是实对称矩阵,m,n为其不同的特征值,p,q分别为其对应得特征向量. 则 p1(Aq)=p1(nq)=np1q (p ...

  9. 在python3.3后urllib2已经不能再用，只能用urllib.request来代替

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在python3.3后urllib2已经不能再用,只能用urllib.request来代替 response=urllib2.urlopen(' ...

  10. Faiss教程：GPU

    Fassi通过CUDA支持GPU,要求3.5以上算力,float16要求CUDA7.5+ 通过index_gpu_to_cpu可以将索引从GPU复制到CPU,index_cpu_to_gpu 和 in ...