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 ...
随机推荐
- PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
出现这个错误的原因就是语法错误,肯定是PHP程序的书写不规范造成,PHP语句标识符错了,没有在php.ini中开启短标签!八成是这个原因,啊啊啊! 今天在写PHP程序的时候总是出现这样的错误:Pars ...
- 【剑指offer】二叉搜索树转双向链表,C++实现
原创博文,转载请注明出处! # 题目 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二叉树节点的定义 struct TreeNod ...
- Map集合学习
Java中常用的Map实现类主要有:HashMap.HashTable.TreeMap.LinkedHashMap. 一:HashMap HashMap介绍 HashMap的底层其实是“链表的数组”, ...
- 剑指offer第三章
剑指offer第三章 1.数值的整数次方 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. class Solution { public ...
- [CF895E]Eyes Closed
luogu description 一个序列\(a_i\),支持一下两种操作. \(1\ \ l_1\ \ r_1\ \ l_2\ \ r_2\): 随机交换区间\([l_1,r_1]\)和\([l_ ...
- LeetCode 360. Sort Transformed Array
原题链接在这里:https://leetcode.com/problems/sort-transformed-array/description/ 题目: Given a sorted array o ...
- E519: Option not supported: fileencodings
怒转,来自http://blog.chinaunix.net/uid-10671107-id-2943841.html,感谢分享. vim中文乱码,原来是编译就除了问题,看来还不一定是不是坑爹的red ...
- 【Netty】netty学习之nio网络编程的模型
[一]NIO服务器编程结构 [二]Netty3.x服务端线程模型
- python模块--os模块的用法
os.getcwd() 获取当前工作的目录,即当前python脚本工作的目录路径 os.phdir("dirname") 改变当前脚本的工作目录:相当于shell下cd os.cu ...
- cnpm 私服搭建(基于docker)
备注: 使用docker-compose 进行安装 1. 代码clone git clone https://github.com/cnpm/cnpmjs.org.git 2. docker bu ...