①<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. 一篇介绍jquery很好的

    本文基于jQuery1.7.1版本,是对官方API的整理和总结,完整的官方API见http://api.jquery.com/browser/ 0.总述 jQuery框架提供了很多方法,但大致上可以分 ...

  2. uitabbarcontroller中 在设置tab bar item的image属性后不显示问题

    开始使用ios中的UITabBarController,在给Tab Bar Item设置自定义图片的时候,遇到了问题 按照如下配置: 出来的结果确是: 实际上test24.png应该是: 纠结了很久, ...

  3. hdu 2085

    PS:递推题..  a[n]=a[n-1]*3+2*b[n-1]  b[n]=a[n-1]+b[n-1] 代码: #include "stdio.h" ]; ]; int main ...

  4. BigBlueButton的安装

    下来VM文件,打开系统后 sudo apt-get updatesudo apt-get upgradesudo apt-get dist-upgrade sudo apt-get install b ...

  5. 程序自启动及后台持续运行的研究（voip和GPS方式）

    1,voip方式    1)首先要修改应用的plist配置,添加下面的设置:        Application does not run in background: NO        Requ ...

  6. c#使用正则表达式替换html标签

    /// <summary> /// 去除HTML标记(用正则彻底去除HTML\CSS\script代码 ) /// </summary> /// <param name= ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. dedecms内容页调用缩略图 缩略图多种用法(借鉴)

    给大家分享一下文章内容页调用缩略图的方法. 这种问题是:文章有缩略图,但是文章里面没有,想把缩略图添加到文章里面. 1.文章内容页调用缩略图方法如下两种.第一种没有大小设置.原图显示.第二种.可以设大 ...

  9. Hierarchical Token Bucket

    例子一: # tc qdisc add dev eth0 root handle 1: htb default 30 # tc class add dev eth0 parent 1: classid ...

  10. Why did Jimmy Wales invest in Quora? Is he afraid that it will take over Wikipedia?

    QUESTION: Why did Jimmy Wales invest in Quora? Is he afraid that it will take over Wikipedia? Answer ...