布局

通常有三种方式

{

　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. xcode代码没颜色的解决方案

    转自:http://blog.csdn.net/jiarusun000/article/details/7527631 今天代码使用了svn后发现项目中的所有原文件都没颜色了... 查找半天后发现是因 ...

  2. 第九章&#183;词典

    第九章·词典 散列:原理 散列是一种赖以高效组织数据并实现相关算法的重要思想. 这样的思想背后的原理却非常直观.简单. 上图是IBM公司和联想公司的服务电话号码,能够看到这样的号码是由数字和字母共同组 ...

  3. 关于docker容器和镜像的区别

    docker的整个生命周期有三部分组成:镜像(image)+容器(container)+仓库(repository): 如下图所示,容器是由镜像实例化而来,这和我们学习的面向对象的概念十分相似,我们可 ...

  4. Azure产品目录

    计算 Linux 虚拟机:为 Ubuntu.Red Hat 等预配虚拟机 Windows 虚拟机 为 SQL Server.SharePoint 等预配虚拟机 应用服务 快速创建适用于 Web 和移动 ...

  5. AsyncContext简介

    为了支持异步处理,在Servlet 3.0中,在ServletRequest上提供了startAsync()方法: AsyncContext startAsync() throws Java.lang ...

  6. UEFI格式预装win8安装win7

    如果本本预装的是win8,而且是较新款的机型,那么当你想要格掉win8,装win7系统时就会遇到问题.主要有两个: 1)安装win7时,笔记本无法识别系统光盘或u盘启动盘 ,提示:屏幕显示“image ...

  7. css按钮固定

  8. plsql 安装后database下拉没有东西（转）

    转载自:http://www.cnblogs.com/yaobolove/p/5682982.html 今天来说一下问题,就是装了plsql竟然在database这一栏没有东西,我也是纠结了很久,感觉 ...

  9. [转]java 下载网络上的图片并保存到本地目录

    原文地址:http://takeme.iteye.com/blog/1683380 import java.io.File; import java.io.FileOutputStream; impo ...

  10. kafka demo

    public static void main(String[] args) { Properties props = new Properties(); props.put("bootst ...