因为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. Structs框架

    一.准备工作及实例 1.解压struts-2.1.6-all.zip(structs网上下载) apps目录:struts2自带的例子程序 docs目录:官方文档. lib 目录:存放所有jar文件. ...

  2. 解决webstorm卡顿问题

    webstorm强大的功能就不多做介绍了.但是它的缺点也显而易见:吃内存. 电脑配置稍低一点,运行webstorm就特别容易卡顿,特别是项目比较大的时候,那卡顿得不要不要的. 在我的笔记本8g内存 2 ...

  3. CS: Marshalling and Unmarshalling, Serialization and Unserialization

    Link1: https://en.wikipedia.org/wiki/Marshalling_(computer_science) Quote: " Comparison with se ...

  4. 西门子成立next47部门，斥资十亿欧元投资VR/AR等初创公司

       近日,西门子公司在慕尼黑举行的"西门子创新日"现场,宣布了三个关于"创新"的新动作.首先,超过六成员工的创新应用得到肯定,其中有 25 个项目获得总数高达 ...

  5. CentOS系统配置记录

    1. 挂載 ntfs: 确定已经安装了rpmforge软件库的源.在线安装使用 yum install 命令 含有 rpmforge源. yum install fuse ntfs-3g -y 安装后 ...

  6. [Python学习] python 科学计算库NumPy—tile函数

    在学习knn分类算法的过程中用到了tile函数,有诸多的不理解,记录下来此函数的用法.   函数原型:numpy.tile(A,reps) #简单理解是此函数将A进行重复输出 其中A和reps都是ar ...

  7. C#自定义控件属性显示在属性面板中操作

    private Color controleColor; [Browsable(true)] [Description("控件颜色"), Category("自定义&qu ...

  8. MSSQL 死锁查询

    SELECT SYS.DM_EXEC_REQUESTS.SESSION_ID,TEXT AS '执行SQL',CLIENT_NET_ADDRESS AS '请求IP',SYS.DM_EXEC_CONN ...

  9. django错误-NoReverseMatch at /admin/

    错误提示: NoReverseMatch at /admin/ Reverse for 'logout' with arguments '()' and keyword arguments '{}' ...

  10. PHP+Zend 输出时中文乱码问题

    1.把输入的格式改成 echo iconv("GB2312","UTF-8",'我爱PHP'); 2.其他的方法,还不会用,有待完善........