布局

通常有三种方式

{

　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. 【Unity】11.5 物理材质 (Physics Material)

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 物理材质 (Physics Material) 用于调整碰撞对象的摩擦力和反弹效果. 二.创建物理材质 要创建物理材质 ...

  2. sqlserver 时间字符串转化为时间格式

    ),),),),,)) select substring('D:\\files,3,len('D:\\files)-2) --去掉前两位路径D:

  3. Splunk Web页面的登录密码忘记了怎么办

    splunk的web登录密码忘记的话,可以使用以下方法重置. 一.关闭splunk服务 /opt/splunk/bin/splunk stop 二.删除默认密码配置文件 三.重启启动splunk服务, ...

  4. Java 编程下简介 Class 与类加载

    即使有一个类并对它一无所知,但其实它本身就包含了许多信息,Java 在需要使用到某个类时才会将类加载,并在 JVM 中以一个 java.lang.Class 的实例存在.从 Calss 实例开始,可以 ...

  5. java 多线程 30: 多线程组件之 CyclicBarrier

    CyclicBarrier 接着讲多线程下的其他组件,第一个要讲的就是CyclicBarrier.CyclicBarrier从字面理解是指循环屏障,它可以协同多个线程,让多个线程在这个屏障前等待,直到 ...

  6. 【C++程序员学 python】python 的文件类型

    python的文件类型主要分为3种,分别是源代码.字节代码和优化代码.这些代码都可以直接运行,不需要进行编译或者连接.这正是python语言的特性,python的文件通过python.exe 或pyt ...

  7. Delphi中的三目运算函数有哪些？(XE10.2+WIN764)

    相关资料:https://www.cnblogs.com/rogge7/p/6078903.html 问题现象:在做一个判断时突然想到了C++的三目运算,就在想Delphi中一共有几个? 问题处理: ...

  8. 大牛总结的Linux提权Exp合集

    https://github.com/SecWiki/linux-kernel-exploits #CVE #Description #Kernels CVE-2017-1000367 [Sudo] ...

  9. js实现完美身份证号有效性验证（转）

    转载自:http://www.cnblogs.com/lzrabbit/archive/2011/10/23/2221643.html 最近需要对身份证合法性进行验证,实名验证是不指望了,不过原来的验 ...

  10. jvm面试题

     1.虚拟机的类加载机制 1.1.什么是虚拟机的类加载机制 在代码编译后,就会生成JVM(Java虚拟机)能够识别的二进制字节流文件(*.class).而JVM把Class文件中的类描述数据从文件加载 ...