布局

通常有三种方式

{

　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.6 恒定力 (Constant Force)

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 恒定力 (Constant Force) 是用于向刚体 (Rigidbody) 添加恒定力的快速实用工具,适用于类似火箭 ...

  2. Android中的MVP架构分解和实现

    1.概述 传统的Android开发架构通常是MVC模式. Model:业务逻辑和实体模型 View:相应于布局文件 Controllor:相应于Activity 单独从逻辑看起来很好,与我们做Web开 ...

  3. 360wifi: 手机锁屏360wifi掉线的解决方法

    如遇到iphone锁屏断网的情况,按照以下操作步骤可以解决一部分用户的问题 (该问题并不是360WifFi问题,与苹果机制有关)如有安卓手机掉线,请确保手机连接其他Wifi并不会掉线,然后尝试粉色字体 ...

  4. [保存]——pycharm5专业版激活方法

  5. 使用终端执行.app程序 for mac

    背景:打开Eclipse闪退,需要查看错误日志 问题:使用Terminal执行 ./Eclipse.app时,提示“no such file or directory” 解决方案:执行./Applic ...

  6. Solr实现 并集式、多值、复杂 过滤查询的权限【转】

    公司开发使用的搜索引擎核心是Solr,但是应为业务原因,需要相对复杂权限机制. 1)通过Solr的filterQuery可以实现field过滤,实现过滤项的效果.索引A{filter1:a,field ...

  7. 【转】31个实用的find命令

    find . -name "*.sql" -exec md5sum {} \; 一.主要内容 ====================================== . 用文 ...

  8. jetty 6.1 笔记

    download: http://dist.codehaus.org/jetty/jetty-6.1.22/ jetty 6.2 代码启动 必要jar包 lib --->> lib---& ...

  9. 从 shell 眼中看世界

    (字符) 展开每一次你输入一个命令,然后按下 enter 键,在 bash 执行你的命令之前, bash 会对输入的字符完成几个步骤处理.我们已经知道两三个案例,怎样一个简单的字符序列,例如 “*”, ...

  10. Ubuntu 安装 mysql

    sudo apt-get install mysql-server sudo apt install mysql-client sudo apt install libmysqlclient-dev