因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：
float:left
这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高
display:inline-block
即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie
*display:inline;
*zoom:1;

css ul li 横向排列的更多相关文章

  1. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  3. 菜单制作:ul li横向排列

    CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 无序列表li横向排列的间隙问题

    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...

  5. CSS中如何将li横向排列

    直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...

  6. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  7. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

  8. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

  9. CSS ul li a 背景图片与文字对齐

    <div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...

随机推荐

  1. Jquery ajax 学习笔记

    本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...

  2. 10月wish me luck

    10/13 明天开始的三天 就要跟历史地理化学说拜拜了 以诚待之 好运 10/20 P三角形计数:一看就是叉积.因为去年迪子讲过.但是我已经忘记了.所以重新写了一遍.把所有的点有序化,将三角形面积转化 ...

  3. [BZOJ1501][NOI2005] 智慧珠游戏

    Input 文件中包含初始的盘件描述,一共有10行,第i行有i个字符.如果第i行的第j个字符是字母”A”至”L”中的一个,则表示第i行第j列的格子上已经放了零件,零件的编号为对应的字母.如果第i行的第 ...

  4. javascript创建跟随鼠标好玩的东西

    不说话,直接上代码. css: #createGoDivBox{ display: none; } #createGoDivBox div{ background-color: #00A6C2; po ...

  5. mysql刷日志的两个参数

    innodb_flush_log_at_trx_commit 0:每秒 ----log---disk1:事物提交 ---log ---disk2:事物提交---log 每秒 ---disk sync_ ...

  6. iOS CADisplayLink 定时器的使用

    CADisplayLink 是一个能让我们以和屏幕刷新频率相同的频率将内容刻画到屏幕上的定时器,在应用中创建一个新的CADisplayLink对象,把他添加到一个runloop中,并且给他提供一个ta ...

  7. Delphi字符串简码

    从网上找的三个函数自己修改了下,在delphi7运行正常,unicode的版本不能用好像 输入:1abc天天 输出:1ABCTT unit UnitJM; interface uses SysUtil ...

  8. [转自itilxf论坛]iTop百问百答

    iTop是什么,和其他itsm软件相比有什么优势?iTop,是一个开源web应用程序,用于IT环境的日常运营.它基于ITIL最佳实践,而又不拘泥于任何具体流程. 优势: 1. 开源,扩展性强容易开发. ...

  9. 使用数据泵+dblink迁移数据库，适用于本地空间不足的情况

    col name for a40 select name,locks,pins from v$db_object_cache where locks > 0 and pins > 0 an ...

  10. 理解css margin

    前提是对display:block元素 1 margin对没有width属性的元素,能影响其宽度,对于有width的则不起作用: 高度方面不受影响 此特性可用来排版 2 margin 与百分比 普通的 ...