①<li>使用浮动的方法，但是要用div包裹起来，该父元素需要设置宽度与高度：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="jquery.js"></script>

<style type="text/css">

    .deo1 ul{

        width:100%;/*这里设置为确定的值也可以*/

        height:20px;

        background-color:yellow;

    }

    .deo1 ul li{

        float:left;

        border:1px solid red;

        margin-right:8px;

        padding:0px;

    }

</style>

<script>

$(function(){

});

</script>

</head>

<body>

<div class="deo1">

<ul>

<li><a href="###">这是1个</a></li>

<li><a href="###">这是2个</a></li>

<li><a href="###">这是3个</a></li>

<li><a href="###">这是4个</a></li>

<li><a href="###">这是5个</a></li>

<li><a href="###">这是6个</a></li>

<div class="clear"></div>

</ul>

</div>

<div deo2>jfsdljfklsdjfds</div>

</body>

</html>

②不用设置ul的高度，使用class=clear清除浮动

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="jquery.js"></script>

<style type="text/css">

    ul{

        width:80%;

        background-color:yellow;

    }

    ul li{

        float:left;

        border:1px solid red;

        margin-right:8px;

        padding:0px;

    }

    .clear{

        clear:both;

    }

</style>

<script>

$(function(){

});

</script>

</head>

<body>

<ul>

<li><a href="###">这是1个</a></li>

<li><a href="###">这是2个</a></li>

<li><a href="###">这是3个</a></li>

<li><a href="###">这是4个</a></li>

<li><a href="###">这是5个</a></li>

<li><a href="###">这是6个</a></li>

<div class="clear"></div>

</ul>

<div deo2>jfsdljfklsdjfds</div>

</body>

</html>

③不使用浮动，而是使用display:inline-block,值得注意的是<li>之间会出现间距，解决的方法是：使用css的margin-right:-8px;或者<li>元素之间不要留有空格，

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="jquery.js"></script>

<style type="text/css">

    ul{

        width:80%;

        background-color:yellow;

    }

    ul li{

        display:inline-block;

        border:1px solid red;

        margin-right:-8px;

        padding:0px;

    }    

</style>

<script>

$(function(){

});

</script>

</head>

<body>

<ul>

<li><a href="###">这是1个</a></li>

<li><a href="###">这是2个</a></li>

<li><a href="###">这是3个</a></li>

<li><a href="###">这是4个</a></li>

<li><a href="###">这是5个</a></li>

<li><a href="###">这是6个</a></li>

</ul>

<div deo2>jfsdljfklsdjfds</div>

</body>

</html>

或者把<li>元素放在一行

<li><a href="###">这是1个</a></li><li><a href="###">这是2个</a></li><li><a href="###">这是3个</a></li>

使得<li>在一行显示，去除浮动的方法的更多相关文章

  1. ie6 ie7下，Li不能自动换行，出现竖排文字现象（PS：li不固定宽度，所有li同一行显示），在ie8却可以

    好久没写CSS,今天又发现一个ie兼容问题. 我需要所有的li在同一行显示,不固定Li的宽度,如果一行排不下,需要自动换行.当然Li的内容长度不同. 必须在li加white-space:nowrap; ...

  2. Repeater用ul li，一行显示多条数据

    原文发布时间为:2009-08-26 -- 来源于本人的百度文章 [由搬家工具导入] .rep {         width:680px;         float:left;         l ...

  3. html中让多个li标签横排显示

    1.我们可以通过为ul标签下所有li标签设定样式“display:inline-block”的方式,让多个li标签横排显示 2.除了以上方法,我们还可以所有li标签使用float(浮动)的方式,让多个 ...

  4. html中 让 ul 的多个 li 在一行内显示

    有时候会需要ul的li都在同一行显示,避免li跑到下一行去,今天遇到了这个问题,记录下来,避免忘记~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  5. /.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stacked: 垂直排列BootStrap

    <meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no ...

  6. 鼠标指向GridView某列显示DIV浮动列表

    需求: 当GRIDVIEW数据列过多,不方便全部显示在同一行或者一些子信息需要鼠标指向某关键列GRIDVIEW的时候显示其子信息. 设计:先把需要显示的浮动数据一次过抓取出来.而不是鼠标指向的时候才从 ...

  7. css：多个div在同一行显示

    使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. 示例如下: <div class="search_row"& ...

  8. 让块元素在同一行显示的方法： float 和inline-block

    float: 定义:按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来(不完全脱离文档流) 值: left.right.none 特点: 1.浮动的块元素可以在一行显示,宽度是被内容撑 ...

  9. tableview最后一行显示不全

    最后一行显示不全是因为表格的高度大于了控制view的高度,减小表格的高度小于的等于控制的view的高度即可

随机推荐

  1. (转)Tomcat的目录结构

    原文:http://hi.baidu.com/qinyougen/item/beeb506abb3e1d08a1cf0ffb Tomcat的目录结构 一.TOMCAT的目录结构 /bin:存放wind ...

  2. paramiko堡垒机、线程及锁

    1.使用paramiko实现ssh连接和scp拷贝 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 1.1 SSHClient 用于连接远 ...

  3. 转发：在开发机上绕过Chrome同源策略的办法

    在开发机上绕过Chrome同源策略的办法 标签: Chrome同源策略跨域 2013-08-21 18:33 4399人阅读 评论(0) 收藏 举报 分类: Chrome扩展(1) 版权声明:本文为博 ...

  4. 51 nod 机器人走方格

    从一个长方形的方格的右上角 走到 左下角 , 问一共有多少种不同的路线可以达到 . #include<stdio.h> #include<string.h> #include& ...

  5. All X_数的快速幂

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submission( ...

  6. 浅谈Android应用性能之内存

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 文/ jaunty [博主导读]在Android开发中,不免会遇到许多OOM现象,一方面可能是由于开 ...

  7. 【转】互联网全站HTTPS的时代已经到来

    原文地址:http://blog.csdn.net/luocn99/article/details/39777707 前言 我目前正在从事HTTPS方面的性能优化工作.在HTTPS项目的开展过程中明显 ...

  8. matlab的调试方法

    • 常用的调试方法.• (1) 设置或清除断点:使用快捷键F12. • (2) 执行:使用快捷键F5.• (3) 单步执行:使用快捷键F10. • (4) step in:当遇见函数时,进入函数内部, ...

  9. 《MORE EFFECTIVE C++》条款20 条款21

    条款20 协助编译器实现返回值优化 当重载运算符的时候,比如+ - * / 这类运算符,该函数返回的值一定是个右值(即不能是引用),那么执行一次运算的开销可能会在临时对象上调用多次构造函数和析构函数, ...

  10. JavaScript数据结构——树

    树:非顺序数据结构,对于存储需要快速查找的数据非常有用. 二叉树:二叉树中的节点最多只能有两个子节点(左侧子节点和右侧子节点).这些定义有助于我们写出更高效的向/从树中插入.查找和删除节点的算法. 二 ...