①<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. JAVA调用系统命令或可执行程序--返回一个Runtime运行时对象，然后启动另外一个进程来执行命令

    通过 java.lang.Runtime 类可以方便的调用操作系统命令,或者一个可执行程序,下面的小例子我在windows和linux分别测试过,都通过.基本原理是,首先通过 Runtime.getR ...

  2. (转)HTML5 本地存储

    原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...

  3. php大力力 [022节]php编程要有一种态度：渴望遇见麻烦

    2015-08-27 php大力力022.php编程要有一种态度:渴望遇见麻烦 不能一遇到问题和麻烦,就烦躁焦躁. 写程序,写代码,调试实验就是天天遇见不可预期的错误bug,这是常态.老生常谈,要适应 ...

  4. 学习笔记：只有一套app设计稿（5s尺寸）切出4和4s尺寸以及安卓系统主流尺寸的图

    如何在只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图 转自:http://www.zhihu.com/question/23255417   版权归原作者所有 目前ios手机 ...

  5. magento二次开发的基本步骤分享

    Magento后台添加新模块的体会 确定命名空间(Namespace)和模块(Modulename)的命名: 在app/etc/modules/ 路径下,创建 Namespace_Modulename ...

  6. Ubuntu下安装lamp

    在Ubuntu里安装PHP环境时可以用恨简单的方法,直接用tasksel命令安装. 首先要安装这个命令: sudo apt-get install tasksel 然后,sudo tasksel in ...

  7. Open vSwitch 给虚拟机网卡限流（QoS）

    这里我们简单描述下如何通过Open vSwitch给虚拟机限流(出流量),同时测试限流效果.测试环境继续复用<整合Open vSwitch与DNSmasq为虚拟机提供DHCP功能>一文中描 ...

  8. JSONP解决ajax跨域问题

    在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...

  9. Highcharts的基本属性和方法详解

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. 目前Hig ...

  10. ME23N PO 打印预览 打印问题

    ME23N进入PO订单,点message查看订单打印的配置 点message查看订单打印的配置 然后spro查看 选择相应的outputtype,然后双击processing routines 可以看 ...