布局

通常有三种方式

{

　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. 通过show variables like ‘general_log%’可以看查询日志

    mysql> show variables like 'general_log%'; +------------------+-----------------------------+ | V ...

  2. linux安全配置检查脚本_v0.5

    看到网上有人分享了一些linux系统的基线检查脚本,但有些检查项未必适合自己或者说检查的不够完善, 计划按着自己的需求重新写一份出来,其中脚本的检查范围在不断更新中. 脚本内容: [root@loca ...

  3. Python 使用pymysql连接MySQL

    由于 MySQLdb 模块还不支持 Python3.x,所以 Python3.x 如果想连接MySQL需要安装 pymysql 模块. pymysql 模块可以通过 pip 安装.但如果你使用的是 p ...

  4. Linux服务开机自启动使用示例

    本文以redis服务为例,介绍了两种服务自启动的方法service,systemctl使用示例 1.修改redis.conf,允许后台运行 daemonize no 改为 daemonize yes ...

  5. 项目日志的管理和应用 log4js－Node.js中的日志管理模块使用与封装

    开发过程中,日志记录是必不可少的事情,尤其是生产系统中经常无法调试,因此日志就成了重要的调试信息来源. Node.js,已经有现成的开源日志模块,就是log4js,源码地址:点击打开链接 项目引用方法 ...

  6. vue中创建全局单文件组件/命令

    1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...

  7. GreenDAO - primary key on multiple columns

    转:http://stackoverflow.com/questions/15250609/greendao-primary-key-on-multiple-columns Does GreenDAO ...

  8. Android NDK之一：什么是NDK？

    转:http://blog.csdn.net/xiruanliuwei/article/details/7560798 What is the NDK? The Android NDK is a to ...

  9. Ubuntu 14.04 编译 Android 4.2.2 for Tiny4412

    . . . . . 在学校里是用 Redhat 6.4 编译的 Android 4.2.2 很顺利,把源码包拷贝到笔记本上的 Ubuntu 14.04 上再编译遭遇了各种坑,所以便有了这篇博客记录解决 ...

  10. GridView“GridView1”激发了未处理的事件“RowDeleting”

    GridView“GridView1”激发了未处理的事件“RowDeleting”. 原因:1.模板列或者buttoncommand里的commandname=“Delete”,“Update”等关键 ...