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 ...
随机推荐
- 《Effective C++》第2章 构造/析构/赋值运算（1）-读书笔记
章节回顾: <Effective C++>第1章 让自己习惯C++-读书笔记 <Effective C++>第2章 构造/析构/赋值运算(1)-读书笔记 <Effecti ...
- 201621123006 《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 多态.重载.继承.覆盖.super.抽象类 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多的字. ...
- JWT的详细简介
什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准.该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场 ...
- C++11_ Variadic Templates
版权声明:本文为博主原创文章,未经博主允许不得转载. 这次主要介绍C++11的又一个新特性 Variadic Templates (可变模板参数) 它的实现类似于initializer_list< ...
- v-if和v-show小对比
相同点 都可以控制元素的显示与不显示.在判断DOM节点是否要显示. 不同点 1.实现方式 v-if是根据后面的数据的真假判断直接从DOM树上删除或重建元素节点. v-show 只是修改元素的css的样 ...
- EasyDarwin如何支持点播和RTMP/HLS直播？EasyDSS！
2017年很长很长一段时间没有更新EasyDarwin开源项目了,虽然心里有很多EasyDarwin功能扩展的计划:比如同步录像.同步RTMP/HLS直播输出.拉模式转发优化.Onvif接入.GB28 ...
- TeamTalk源码分析（十一） —— pc客户端源码分析
--写在前面的话 在要不要写这篇文章的纠结中挣扎了好久,就我个人而已,我接触windows编程,已经六七个年头了,尤其是在我读研的三年内,基本心思都是花在学习和研究windows程序上 ...
- apache 支持.htaccess重写url
1. httpd.conf 添加: <Directory /> Options +Indexes +FollowSymLinks +Multiviews AllowOverride all ...
- 程序设计入门-C语言基础知识-翁恺-第五周：函数-详细笔记（五）
目录 第五周:函数 5.1 函数 5-2 使用函数 5.3 课后习题 第五周:函数 5.1 函数 什么是函数? 函数是一块代码,接受零个或多个参数,做一件事情,并返回零个或一个值. 函数声明语法 返回 ...
- HDU1757
解题思路:分析需要不少时间,比较懒,直接把别人的分析贴在这里, 然后贴上自己写的代码: K相当之大.所以逐一递推的算法无法胜任.这时我们就不得不运用矩阵加速.首先来讲一下矩阵乘法: 若一矩阵的列数与另 ...