①<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.net.SocketException: recvfrom failed: ECONNRESET (Connection reset by peer)

    java.net.SocketException: recvfrom failed: ECONNRESET (Connection reset by peer)

  2. metaprogramming笔记

    动态多态与静态多态 动态多态:允许我们通过单个基类指针或引用处理多个派生类型的对象. 模板元编程中强调静态多态,允许不同类型的对象以同样的方式被操纵,只要它们支持某种共通的语法即可. 动态多态,连同& ...

  3. Android弱网测试中关于网络检测的一些借鉴方法

    Android 平台下提供了一个android.net.ConnectivityManager类来监控当前的网络状态包括wifi.gprs.UMTS等.可以判断当前用户网络到底是WIFI还是移动网络, ...

  4. Java容器类接口的选择

    我们知道Java容器类实际提供了四类接口:Map,List,Set和Queue,如下图所示,每种接口都有不止一个版本的实现,如果在实际编写程序时需要使用某种接口时该如何选择. 从Oracle的Java ...

  5. Cash Machine_多重背包

    Description A Bank plans to install a machine for cash withdrawal. The machine is able to deliver ap ...

  6. 完美解决方案,可排除DATASET不支持System.Nullable错误

    完美解决方案,可排除DATASET不支持System.Nullable错误 using System; using System.Collections.Generic; using System.L ...

  7. HDU 1005 Number Sequence（AC代码）

    #include <stdio.h> #include <string.h> int main() { int a,b,n; int i; ]={}; f[]=; f[]=; ...

  8. 从数学角度看最大期望(EM)算法 I

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2014/11/18 更新.发现以前的公式(2)里有错误,现已改过来.由于这几天和Can讨论了EM算法,回头看我以前写的 ...

  9. VS2012 编译 Assimp

    VS2012 编译 Assimp 环境: assimp-3.1.1Windows 7 64BitVisual Studio 2012CMake 2.8.12.1 注意: 在Windows中编译assi ...

  10. (实用篇)PHP ftp上传文件操作类

    <?php /** * 作用:FTP操作类( 拷贝.移动.删除文件/创建目录 ) */ class class_ftp { public $off; // 返回操作状态(成功/失败) publi ...