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

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

第一种解决方式：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          * {
  8.              margin: 0;
  9.              padding: 0;
  10.              list-style: none;
  11.          }
  12.  
  13.          ul {
  14.              width: 550px;
  15.              height: 200px;
  16.              background-color: #abcdef;
  17.          }
  18.  
  19.          li {
  20.              float: left;
  21.              width: 100px;
  22.              height: 200px;
  23.              background-color: darkorange;
  24.          }
  25.  
  26.          li:not(:first-child) {
  27.              margin-left: 50px;
  28.          }
  29.      </style>
  30.  </head>
  31.  <body>
  32.  <ul>
  33.      <li></li>
  34.      <li></li>
  35.      <li></li>
  36.      <li></li>
  37.  </ul>
  38.  </body>
  39.  </html>

第二种解决方式：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          * {
  8.              margin: 0;
  9.              padding: 0;
  10.              list-style: none;
  11.          }
  12.  
  13.          ul {
  14.              width: 550px;
  15.              height: 200px;
  16.              background-color: #abcdef;
  17.          }
  18.  
  19.          li {
  20.              float: left;
  21.              width: 100px;
  22.              height: 200px;
  23.              background-color: darkorange;
  24.          }
  25.  
  26.          li + li {
  27.              margin-left: 50px;
  28.          }
  29.      </style>
  30.  </head>
  31.  <body>
  32.  <ul>
  33.      <li></li>
  34.      <li></li>
  35.      <li></li>
  36.      <li></li>
  37.  </ul>
  38.  </body>
  39.  </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. 破解google翻译API全过程

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/6554340.html 前言 google的翻译不得不承认它 ...

  2. LeetCode OJ：Number of 1 Bits（比特1的位数）

    Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also know ...

  3. windows下的一些命令

    dir 相当于linux下的ls clear 清屏 netstat 活动连接 | 管道命令 findstr 查询类似linux的grep tasklist 查看进程列表 taskkill 杀死进程 d ...

  4. Python的介绍及Pycharm软件的安装

    一.Python介绍 1.  Python是一种解释性.面向对象.动态数据类型的高级程序设计语言. Python语言创始人是吉多.范罗苏姆:起源与1989年 2.  缺点:运行速度慢(由于是解释性语言 ...

  5. .net的session详解

    http://blog.csdn.net/justin_wkf/article/details/5746914#comments

  6. continue的作用

    特别有用,用于循环中-跳过不满足某个条件的某轮循环continue后面的语句

  7. VERIFY DATABASE 正在异常终止。 (Microsoft SQL Server，错误: 3169)

    1.错误描述 标题: Microsoft SQL Server Management Studio ------------------------------ 备份介质验证失败: [文件: D:\S ...

  8. ROS-I工业机器人培训课程资料 2017-06-30

    美国ROS工业联盟于2017年6月6日至8日在德克萨斯州圣安东尼奥市的SwRI举办了ROS工业开发人员培训班.12位与会者代表了一系列不同的组织,包括Bastian Solutions,EWI,Joh ...

  9. 【干货】Kaggle 数据挖掘比赛经验分享（mark 专业的数据建模过程）

    简介 Kaggle 于 2010 年创立,专注数据科学,机器学习竞赛的举办,是全球最大的数据科学社区和数据竞赛平台.笔者从 2013 年开始,陆续参加了多场 Kaggle上面举办的比赛,相继获得了 C ...

  10. pandas.read_csv()参数(转载)

    文章转载地址 pandas.read_csv参数整理 读取CSV(逗号分割)文件到DataFrame 也支持文件的部分导入和选择迭代 更多帮助参见:http://pandas.pydata.org/p ...