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 ...
随机推荐
- Linux设备驱动——简单的字符驱动
本文介绍Linux字符设备的静态注册方法, 其中涉及到的模块加载,不了解的可以先参考 构建和运行模块 1. 还是线上源代码: //memdev.h #ifndef _MEMDEV_H_ #define ...
- PHPStorm 使用正则批量查询替换并自动转换大小写的方法
PHPStorm 的项目查询替换功能那是非常非常强大的, 速度也很快, 配合正则更加灵活强大. 一般的正则查询替换没什么太多好说的, 这里主要说说比较少用的 大小写自动转换的问题, 也是比较少用但很有 ...
- Java基础面试题 (一)
1.面向对象的三个特征 封装,继承,多态.这个应该是人人皆知,有时候也会加上抽象. 2.多态的好处 允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不同的行为方式(发送消息 ...
- 地图API的选择和使用
在我们程序员的日常开发中,总会时不时的需要用到地图开发,我也在多次碰到之后,写下我对地图开发的理解经验和总结. 一.地图的选择 回想一下我们生活中用到的地图工具,数了一下,百度地图,高德地图,腾讯地图 ...
- UNIX 基础知识
登陆 1.登录名 系统在其 口令文件(通常是/etc/passwd文件) 中查看用户名,口令文件中包含了有关用户的信息. 2.shell ...
- js之隔行换色
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- BZOJ4832: [Lydsy1704月赛]抵制克苏恩（记忆化&期望）
Description 小Q同学现在沉迷炉石传说不能自拔.他发现一张名为克苏恩的牌很不公平.如果你不玩炉石传说,不必担心,小Q 同学会告诉你所有相关的细节.炉石传说是这样的一个游戏,每个玩家拥有一个 ...
- (function($){...})(jQuery)与$(function(){...})区别
$(function(){...}) 这种写法和jQuery(function(){...}),$(document).ready(function(){...})作用一样,表示文档载入后需要运行的代 ...
- LOJ2323. 「清华集训 2017」小 Y 和地铁 【搜索】【思维】【好】
LINK 思路 首先如果直接算每一个段有三个决策 左/右 上/下 跨不跨过端点 这样的复杂度是\((2^3)^{22}\),显然是无法接受的 然后考虑怎么优化这个东西 首先左右这个决策是没有意义的 因 ...
- 禁止别人用QQ号搜索到你，同时告诉你如何破解
禁止他人用QQ号搜索到我们 举例说明:现在查找自己的QQ号,是可以通过搜索查找到的. 怎么禁止别人搜索到我们呢? 1.打开QQ面板,点击我们的头像. 2.在我们的昵称旁边,有一个小的按钮,点击它可以更 ...