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

问题主要原因，第一个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. APUE学习笔记——5.2流与文件对象、fwide

    1 流         当一个文件被打开时,可以获得文件描述符.通过文件描述符可以对文件进行I/O操作.而I/O操作是通过流完成的. 流的定向:         在Unix系统中,使用 ASCII标准 ...

  2. ffmpeg jpeg图片播放失败之问题排查

    播放jpeg时,avformat_find_stream_info出现以下问题,排查: [jpeg_pipe @ 0x146a80] Could not find codec parameters f ...

  3. 从头搭建一个React应用

    node,webpack这些就不一一介绍怎么安装了,默认大家都知道. 一.npm install -g create-react-app 首先全局安装react的脚手架工具 create-react- ...

  4. select2如何设置默认空值

    1.问题背景 select2搜索下拉框,当满足某种条件时,让它默认选中空值 2.问题原因 <!DOCTYPE html> <html> <head> <met ...

  5. IOS开发 arc与非Arc代码的区别

    是属于ios开发中的内存管理问题:在这我简要概述一下,详细讲的话内容挺多,而且是作为一个ios开发人员,或ios开发爱好者,这是必须了解的:Objective-c中提供了两种内存管理机制MRC(Man ...

  6. 【剑指offer-21】调整数组顺序使奇数位于偶数前面，C++实现（冒泡排序）

    1.题目 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分. 2.思路 本题有两种解法,一种是不保证数组稳定性的解法,一种是保 ...

  7. 软件包 com.baidu.location

    http://developer.baidu.com/map/loc_refer/index.html?com/baidu/location/package-summary.html

  8. 【解题报告】13级个人结业赛（二） ——动(dou)态(bu)规(hui)划(zuo)专场

    额.果然是动(dou)态(bu)规(hui)划(zuo)专场... A: 翻倍序列 dp[i][j]表示第i个位置是j的情况的个数那么dp[i][j]=∑dp[i-1][k]   (j%k==0)初始 ...

  9. ubuntu 安装nodejs/npm

    安装发行稳定版 Ubuntu 默认仓库里带有Node.js,版本较旧,这并不是最新版,但是应该很稳定.执行如下命令:   1 2 sudo apt-getupdate sudo apt-getinst ...

  10. BZOJ2705 SDOI2012 Longge的问题 【欧拉函数】

    BZOJ2705 SDOI2012 Longge的问题 Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, ...