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 ...
随机推荐
- maven_00_资源帖
一.官方资料 Maven Getting Started Guide 二.精选资料 Maven for building Java applications - Tutorial Maven Tuto ...
- SpringAnnotation注解之@PreDestroy，@PostConstruct，@Scope
@Scope的使用很简单,直接在类上加上就行 @PostConstruct:相当于xml配置方式的init-method方法 @PreDestroy:相当于xml配置方式的destroy-method ...
- spring boot + dubbo 服务部署实例
项目github:https://github.com/nalidou/spring-dubbo 1. 公共组件:dubbo-component 提供了接口定义.实体类等,其他项目可以直接导入jar包 ...
- Java基础学习-接口-概述以及成员特点
package interfaceclass; /*接口的概述: * 接口解决的问题: * 因为java中的继承的单一局限性(子类只能继承一个父类),为了打破这个局限,java语言提供了一个机制,接口 ...
- 2018.11.13 N4010A 通信设置
设置电脑之IP地址及Subnet mask. IP address: 192.168.1.2 Subnet mask: 255.255.255.0, 其它选项为默认. 然后点击OK ...
- 自己定义的Excetpion继承哪个异常有什么讲究？[待解答]
try catch的地方需要用到一个自定义的DBException,如下: 于是我就自定义了一个DBException,继承Excetpion,以父类Exception构造器创建构造器: DBExce ...
- Shell 命令行，实现对若干网站状态批量查询是否正常的脚本
Shell 命令行,实现对若干网站状态批量查询是否正常的脚本 如果你有比较多的网站,这些网站的运行状态是否正常则是一件需要关心的事情.但是逐一打开检查那简直是一件太糟心的事情了.所以,我想写一个 sh ...
- EasyPlayer RTSP播放器:一个适用于安防行业的工具利器（EasyPlayer Windows v2.0.17.0709）
本文转自EasyDarwin开源团队成员Sword的博客:http://blog.csdn.net/swordtwelve EasyPlayer(Windows) v2.0.17.0709版本又更新发 ...
- 给View 添加手势，点击无反应 如何给View添加点击事件，手势方法
项目中有很多地方需要添加点击事件,重复代码很多,所以做了一个UIView的分类,专门做点击事件使用.项目地址:UIView-Tap 代码很简单,主要有一点就是注意分类不能直接添加属性,需要用到运行时相 ...
- IOS开发 arc与非Arc代码的区别
是属于ios开发中的内存管理问题:在这我简要概述一下,详细讲的话内容挺多,而且是作为一个ios开发人员,或ios开发爱好者,这是必须了解的:Objective-c中提供了两种内存管理机制MRC(Man ...