①<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. iOS定时器NSTimer的使用方法

    1.初始化 + (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelect ...

  2. mysql 1067 启动错误！！！

    图二:服务器启动不成功 -- 解决方法

  3. Ogre 1.8 terrain 和 paging 组件

    以下转自:http://hi.baidu.com/xocoder/item/e8d87cf53d87612b753c4cfd OGRE地形生成 OGRE可以通过两个接口来生成地形,分别是void Te ...

  4. python字符decode与encode的问题

    同事在工作中遇到一个字符编码的问题:问题是:从mysql数据库中读出来的varchar类型数据在python是unicode类型的. 但他却对这个unicode字符进行了decode,因为他以为读出来 ...

  5. ISO c++11 does not allow conversion from string literal to 'char*'

    http://stackoverflow.com/questions/9650058/deprecated-conversion-from-string-literal-to-char

  6. php大力力 [031节] php设计系统后台菜单和样式设计

    php大力力 [031节] php设计系统后台菜单和样式设计 耗掉我一整夜的时间,把后台html设计了一个,对于我这样的html白痴,实属不容易啊. 留下一点点网上查找的网页知识: 索马里论坛群发简介 ...

  7. Camel routes in Spring config file

    The normal spring bean definition configuration file, the xsi:schemaLocation only has two: beans and ...

  8. Channel Allocation_四色定理

    Description When a radio station is broadcasting over a very large area, repeaters are used to retra ...

  9. DirectX游戏编程入门

    刚开始学习D3D,安装完DirectX9后,在VS2008中新建Win32项目· ----------------------------------------------------------- ...

  10. Magento路径函数getBaseUrl使用方法

    当我们在设计开发Magento主题模板时候,有个函数一定要知道,那就是getBaseUrl函数,用getBaseUrl函数我们可以在.phtml里调用JS.image.File.   1,getBas ...