因为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. 整理UWP中网络和设备信息获取的帮助类,需要的拿走。

    网络(运营商信息,网络类型) public static class NetworkInfo { /// <summary> /// 网络是否可用 /// </summary> ...

  2. SVG实现导航动画

    效果图动画后 html <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> ...

  3. 成功进行了一次UDP打洞

    本次测试参数:服务端是公网固定IP:两个客户端A和B分别位于不同电脑,不同宽带,不同型号路由后面(一个家庭路由,一个企业路由),且路由没有经过特别的设置.测试没有什么特别的地方,只是依照网络资料进行实 ...

  4. PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)

    关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datag ...

  5. 说说 js String

    首先说说js的字符串,说到字符串这个就和我们原来的C# 代码有区别的就是,js里面没有chart类型.就是说他里面的 “ ”和‘ ’是要表达一样的意思. 其实这个里面就有一个问题了特别实在拼接字符串的 ...

  6. mongodb用子文档做为查询条件的两种方法

    { "_id": ObjectId("52fc6617e97feebe05000000"), "age": 28, "level& ...

  7. iOS CADisplayLink 定时器的使用

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

  8. 在 Linux 下搭建 Git 服务器

    环境: 服务器 CentOS6.6 + git(version 1.7.1)客户端 Windows10 + git(version 2.8.4.windows.1) ① 安装 Git Linux 做为 ...

  9. Log4Net

    注意事项 <!-- The file log4Net.config is copied into bin/Debug /release by compiler 添加如下内容到 assemblyi ...

  10. vmstat和iostat

    一.vmstat1.命令示例#vmstat 5每5秒输出一次 2.输出详解procs -----------memory---------- ---swap-- -----io---- --syste ...