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

问题主要原因，第一个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. LeetCode OJ：Min Stack（最小栈问题）

    Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...

  2. Redis数据结构：链表

    链表被广泛用于Redis的各种功能,比如列表键.发布与订阅.慢查询.监视器等. 每个链表节点由一个listNode结构表示,每个节点都有前置节点和后置节点. 每个链表使用一个list结构来表示,这个结 ...

  3. easyui（1）

    使用Easyui1.引入必要的文件 1).jquery核心库 2).easyui核心库 3).easyui中文提示信息 4).自己开发的js文件 5).easyui核心UI文件css 6).easyu ...

  4. NumberFormat

    package com.NumberFormat; import java.text.NumberFormat; public class Study01 { public static void m ...

  5. 一条命令修改Linux密码

    方法一.直接使用passwd命令 /bin/echo newpass|/usr/bin/passwd --stdin username *注:该方式只适用于红帽系操作系统,比如centos,redha ...

  6. igmpproxy源代码学习——配置信息加载 loadConfig

            在igmpproxy主程序运行之前需要先读取配置文件,igmpproxy的配置文件通常为/etc/igmpproxy.conf或者/var/igmpproxy.conf 其内容如下: ...

  7. Java虚拟机读写其他进程的数据--Process对象

    使用Runtime对象的exec()方法可以运行平台上的其他程序,该方法产生一个Process对象,Process对象代表由该Java程序启动的子进程. Process类提供了3个方法,用于让程序和其 ...

  8. jQuery选项卡wdScrollTab

    实例Demo 运行一下 参数说明 Config active Number   Active tab index. Base on 0. autoResizable Boolean   Whether ...

  9. 去除inline-block元素间间距的N种方法(转)

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  10. 拷贝ssh公钥到多台服务器上

    这篇文章几乎是对Push SSH public keys to multiple host的翻译,谢谢该作者. 使用SSH登陆.执行命令到远程机器需要输入密码,很多系统需要免输密码访问远程机器,比如h ...