问题示意，好多网站一般都有这种布局，如

问题主要原因，第一个li没有margin-left 其余有（这里只考虑一排的情况）

第一种解决方式：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         * {

             margin: 0;

             padding: 0;

             list-style: none;

         }

         ul {

             width: 550px;

             height: 200px;

             background-color: #abcdef;

         }

         li {

             float: left;

             width: 100px;

             height: 200px;

             background-color: darkorange;

         }

         li:not(:first-child) {

             margin-left: 50px;

         }

     </style>

 </head>

 <body>

 <ul>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

 </ul>

 </body>

 </html>

第二种解决方式：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         * {

             margin: 0;

             padding: 0;

             list-style: none;

         }

         ul {

             width: 550px;

             height: 200px;

             background-color: #abcdef;

         }

         li {

             float: left;

             width: 100px;

             height: 200px;

             background-color: darkorange;

         }

         li + li {

             margin-left: 50px;

         }

     </style>

 </head>

 <body>

 <ul>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

 </ul>

 </body>

 </html>

li布局问题的更多相关文章

  1. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  2. UL LI 布局 TAB 切换条

    web页面实现tab的功能有几种实现方式,下面是使用UL LI DIV方式实现的tab. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  3. nav布局 在线演示 DIVCSS5

    <!doctype html> nav布局 在线演示 DIVCSS5 传统 div ul li布局导航条效果 网站首页 HTML教程 HTML入门 HTML5教程 CSS教程 CSS入门 ...

  4. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  5. 五子棋棋盘布局 table和ul哪个好

    想要在页面布局以上棋盘,可以用ul li 布局,但却有明显的缺点: 1.两行两列:ul li 下面如果再放li 会出错,只能是放其他的,比如div. 或者放li *行*列: 但是这样有两个明显缺陷: ...

  6. 一步一步构建手机WebApp开发——页面布局篇

    继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...

  7. 简单探讨弹性布局flex

    css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...

  8. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  9. CSS的兼容性与BUG处理

    骨灰级清除浮动 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility ...

随机推荐

  1. 使用游标、存储过程、pivot 三种方法导入数据

    --使用游标循环 if (exists (select * from sys.objects where name = 'Base_RecordTend_Test')) drop proc Base_ ...

  2. log4cpp第一个程序HelloWord

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  3. $.ajaxSetup

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> ...

  4. DRF中序列化器定义及使用

    首先需要明白序列化和反序列化的定义及作用: 序列化是将程序语言转换为JSON/XML; 反序列化是将JSON/XML转换为程序语言; 对应到Django中,序列化即把模型对象转换为字典形式, 在返回给 ...

  5. [转载]Spring源码下载地址

    转载自:http://blog.csdn.net/liuzheng2684/article/details/6534722,谢谢! 今天想下载一下spring的源代码,登录到Spring官网,傻眼了, ...

  6. C#设置System.Net.ServicePointManager.DefaultConnectionLimit，突破Http协议的并发连接数限制

    在Http协议中,规定了同个Http请求的并发连接数最大为2. 这个数值,可谓是太小了. 而目前的浏览器,已基本不再遵循这个限制,但是Dot Net平台上的 System.Net 还是默认遵循了这个标 ...

  7. MAC 下安装 SVN

    在mac下安装svn走了很多弯路,进过探索,现在对svn的安装做了总结,可以分为2种: 1.由于 xCode自带svn,所以可以安装xCode 1).打开App Store,搜索xCode,下载安装 ...

  8. 转-redux-saga

      React+Redux Cycle(来源:https://www.youtube.com/watch?v=1QI-UE3-0PU) 让我惊讶的是,redux-saga 的作者竟然是一名金融出身的在 ...

  9. java.lang.IllegalArgumentException: Invalid character found in method name

    1.错误描述 信息: Error parsing HTTP request header Note: further occurrences of HTTP header parsing errors ...

  10. CSDN博客积分规则

    1.博客积分规则 博客积分是CSDN对用户努力的认可和奖励,也是衡量博客水平的重要标准.博客等级也将由博客积分唯一决定.积分规则具体如下: 每发布一篇原创或者翻译文章:可获得10分: 每发布一篇转载文 ...