li布局问题
问题示意，好多网站一般都有这种布局，如
问题主要原因，第一个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布局问题的更多相关文章
- 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性
会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...
- UL LI 布局 TAB 切换条
web页面实现tab的功能有几种实现方式,下面是使用UL LI DIV方式实现的tab. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- nav布局 在线演示 DIVCSS5
<!doctype html> nav布局 在线演示 DIVCSS5 传统 div ul li布局导航条效果 网站首页 HTML教程 HTML入门 HTML5教程 CSS教程 CSS入门 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 五子棋棋盘布局 table和ul哪个好
想要在页面布局以上棋盘,可以用ul li 布局,但却有明显的缺点: 1.两行两列:ul li 下面如果再放li 会出错,只能是放其他的,比如div. 或者放li *行*列: 但是这样有两个明显缺陷: ...
- 一步一步构建手机WebApp开发——页面布局篇
继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...
- 简单探讨弹性布局flex
css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- CSS的兼容性与BUG处理
骨灰级清除浮动 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility ...
随机推荐
- spring 核心接口之 Ordered
Spring中提供了一个Ordered接口.从单词意思就知道Ordered接口的作用就是用来排序的.Spring框架是一个大量使用策略设计模式的框架,这意味着有很多相同接口的实现类,那么必定会有优先级 ...
- 如何解决虚拟机中的ubuntu系统方向键与退格键不能正常使用的问题
问题描述: 在虚拟机中安装了ubuntu系统,打开vi,当vi进入insert模式后,后退键(backspace)不能删除字符,上下左右键也对应了W,S,A,D. 解决办法: cp /etc/vim/ ...
- Spring报错：java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be opened because it does not exist
感谢:http://blog.chinaunix.net/uid-20681545-id-184633.html提供的解决方案,非常棒 ! 问题说明: 新建一个Spring项目,新建一个Bean类:H ...
- 【PL/SQL编程】块结构
[DECLARE] --声明部分,可选 BEGIN --执行部分,必须 [EXCEPTION] --异常处理部分,可选 END
- （转）MapReduce Design Patterns（chapter 4 （part 1））（七）
Chapter 4. Data Organization Patterns 与前面章节的过滤器相比,本章是关于数据重组.个别记录的价值通常靠分区,分片,排序成倍增加.特别是在分布式系统中,因为这能提高 ...
- 怎么样编译DeepMind？
可以通过下面的文章来编译著名的deepmind系统. How to build DeepMind LabDeepMind Lab uses Bazel as its build system. Its ...
- Ext JS 5 关于Store load返回json错误信息或异常的处理
关于在store load的时候服务器返回错误信息或服务器出错的处理.ExtJS4应该也能用,没测试过. 这里有两种情况: 服务器返回错误json错误信息,状态为200 服务器异常,状态为500 一. ...
- pytorch在CPU和GPU上加载模型
pytorch允许把在GPU上训练的模型加载到CPU上,也允许把在CPU上训练的模型加载到GPU上.CPU->CPU,GPU->GPU torch.load('gen_500000.pkl ...
- ubuntu 搜狗输入法成功安装
第一次成功安装这个破玩意,心里万分高兴啊! 几个条件: 1 ubuntu14.04 2 对的教程 参考文献:http://jingyan.baidu.com/article/ad310e80ae6d9 ...
- sqlserver 执行脚本报内存溢出的处理方式
用微软自带的sqlcmd工具,可以导入执行.以SQL Server 2008R2版本为例: 第一步:Win+R 键入:cmd 命令,开启命令行工具: 第二步:键入:cd C:\Program File ...