因为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. Hello world！（OC）

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { NSLog(@"Hello ...

  2. 全站 HTTPS 来了

    !版权声明:本文为腾讯Bugly原创文章,转载请注明出处腾讯Bugly特约作者:刘强 最近大家在使用百度.谷歌或淘宝的时候,是不是注意浏览器左上角已经全部出现了一把绿色锁,这把锁表明该网站已经使用了 ...

  3. oracle触发器与数据导入导出的简单使用

    exp cjtxx/123456@192.168.80.231/orcl file=d:\cjtxx.dmp owner=cjtxx [tables=tablename] imp cjttest/12 ...

  4. 开机自动启动Tomcat

    一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. 2.安装Tomc ...

  5. mysql解压版安装

    1.下载MySQL解压版(32位) http://dev.mysql.com/downloads/mysql/

  6. HTML: vertical algin Big/small div in same row (bootstrap)

    Reference: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=vot ...

  7. Android 高亮显示文本中的关键字

    总结:SpannableString用好,可以各种替换Span来操作各种内容 1.文本关键字高亮关键在于:SpannableString使用 主要就是通过关键字在文本的开始index,结束index来 ...

  8. Android底部菜单的实现

    前言:以前制作菜单使用TabHost,但是android 3.0以上就被废弃了,google已经不建议使这个类了.ActionBar也是菜单,不过在头部,算是导航了 ===本文就介绍怎么制作底部菜单= ...

  9. oracle优化

    sql语句 优化方式: 1select 语句中避免用"*" oracle在解析时,会将“*”依次转换成所有的列名(数据字典完成)耗时 2尽量多用commit语句 及时提交,释放资源 ...

  10. Oracle Function

    Oracle Sql 中常用函数 小写字母转大写字母:upper(); 大写字母转小写字母:lower(); 字符串截取函数:substr(str,a,b); a,b为整数,str为字符串, 截取字符 ...