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

问题主要原因，第一个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. 12.18 webSocket消息推送

    ---恢复内容开始--- 准备工作: 在要跳转到的页面加入js <#--弹窗--> <div class="modal fade" id="myModa ...

  2. Kafka 单节点多Kafka Broker集群

    Kafka 单节点多Kafka Broker集群 接前一篇文章,今天搭建一下单节点多Kafka Broker集群环境. 配置与启动服务 由于是在一个节点上启动多个 Kafka Broker实例,所以我 ...

  3. HDU2043 密码

    解题思路:10分钟AC,不解释,so easy! #include<cstdio> #include<cstring> #include<algorithm> us ...

  4. absolute的left和right的妙用

    之前做了一个自定义鼠标右键的布局,做的过程中遇到了一个很有趣的问题,之前一直没有注意到. 目标样式如下: 期初并不知道文字内容需要随机,所以写的时候写“死”了. 所有的内容都是按照设计的四个文字走的, ...

  5. SVM处理多分类问题（one-versus-rest和one-versus-one的不同）

    SVM算法最初是为二值分类问题设计的,当处理多类问题时,就需要构造合适的多类分类器. 目前,构造SVM多类分类器的方法主要有两类:一类是直接法,直接在目标函数上进行修改,将多个分类面的参数求解合并到一 ...

  6. 【错误】More than one row with the given identifier was found: 1, for class:

    问题原因: 数据库测试数据自己填入,两条数据的id都为1,所以报错 问题解决: 找到数据库表 删除全部数据

  7. bat命令2

    echo.@.call.pause.rem(小技巧:用::代替rem)是批处理文件最常用的几个命令,我们就从他们开始学起. echo 表示显示此命令后的字符 echo off 表示在此语句后所有运行的 ...

  8. 一步步用python制作游戏外挂【转】

    转自:http://www.cnblogs.com/xsmhero/archive/2013/01/03/2842973.html 玩过电脑游戏的同学对于外挂肯定不陌生,但是你在用外挂的时候有没有想过 ...

  9. vb编写串口调试程序

    sub是子模块,可以调用但是没有返回值,function是有返回值的. public sub 可以在其它form里调用,而private sub 只能在当前form里调用. vb里的if else , ...

  10. arangodb 安装简单试用

    备注:   测试环境使用的是docker  1. 安装 docker run -p 8529:8529 -e ARANGO_ROOT_PASSWORD=openSesame arangodb/aran ...