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

问题主要原因，第一个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. Markdown_02_作图

    [TOC] 前言 一.序列图(Sequence) 序列图由 js-sequence提供支持,可以将代码块转成序列图 示例如下: ```sequence Title: Here is a title A ...

  2. eureka -2 - 重要配置

    Server 端配置 eureka.client.registerWithEureka :是否将自己注册到Eureka Server,默认是true,如果是单节点部署,切是server端,则设置成fa ...

  3. SpringAnnotation注解之@Component,@Repository,@Service,@Controller

    @Component:组件,表示此写上了此注解的bean,作为一个组件存在于容器中.这样的话别的地方就可以使用@Resource这个注解来把这个组件作为一个资源来使用了.初始化bean的名字为类名首字 ...

  4. GNU C 、ANSI C、标准C、标准c++区别和联系

    转载自点击打开链接 GNU计划,又称革奴计划,是由Richard Stallman在1983年9月27日公开发起的.它的目标是创建一套完全自由的操作系统.它在编写linux的时候自己制作了一个标准成为 ...

  5. Python中for、while、break、continue、if的使用

    1.if  -  elif  -  else 的使用 格式:if  条件1: 条件1满足时执行的事件1 条件2满足时执行的事件2 elif   条件2: 条件2满足执行事件3 条件2满足执行事件4 e ...

  6. console 代理

    window.log = function(){ if(!window.console ){ return; } var arr = [].slice.call(arguments); arr.uns ...

  7. 天气预报api整理

    目录 1.国家气象局提供的天气预报接口 1.1.接口网址 1.2.示范代码 2.各个城市对应的代码 作为一个开发的diaosi,在开发过程中,时常会遇到添加天气的功能,现在百忙之中抽出一点时间整理了一 ...

  8. HihoCoder 1044 垃圾清理 （优化：状态压缩）

    状态压缩·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho在兑换到了喜欢的奖品之后,便继续起了他们的美国之行,思来想去,他们决定乘坐火车前往下一座城市— ...

  9. vw+vh+rem响应式布局

    科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位.相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度.视口被均分为100单位的vw; vh: ...

  10. [深度学习]Wake-Sleep算法

    本文翻译自2007-To recognize shapes, first learn to generate images, Geoffrey Hinton. 第五种策略的设计思想是使得高层的特征提取 ...