当前位置：前端开发者 > CSS > 正文

前端CSS开发:解决ul里最后一个li的margin问题

2018-07-25 分类：CSS 阅读(1033) 评论(0)

动态前端开发工具|ws 前端开发工具|web 前端开发工具有哪些

先看两个demo，你可以先运行，改变box的宽度看一下。
1、运用css3的nth-child(3n)
html 代码片段

<!DOCTYPE html>

<head>

<meta charset=”UTF-8″>

<title>前端实时可视化开发工具体验:demo</title>

<style>

* {

margin: 0;

padding: 0

}

.box {

width: 620px;

padding: 10px;

background: #bbb;

border: 1px solid #f00;

margin: 0 auto;

}

.box ul {

overflow: hidden;

}

.box ul li {

list-style: none;

width: 200px;

height: 100px;

background: #fff;

float: left;

margin-right: 10px;

margin-bottom: 10px;

}

.box ul li:nth-child(3n) {

margin-right: 0;

}

</style>

</head>

<body>

<div class=”box”>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

</ul>

</div>

</body>

2、运用margin负值
html 代码片段

<!DOCTYPE html>

<head>

<meta charset=”UTF-8″>

<title>demo</title>

<style>

* {

margin: 0;

padding: 0

}

.box {

width: 620px;

padding: 10px;

background: #bbb;

border: 1px solid #f00;

margin: 0 auto;

}

.box ul {

overflow: hidden;

margin-left: -10px;

}

.box ul li {

list-style: none;

width: 200px;

height: 100px;

background: #fff;

float: left;

margin-left: 10px;

margin-bottom: 10px;

}

</style>

</head>

<body>

<div class=”box”>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

</ul>

</div>

</body>

</html>

首先，看看设计的样子，并计算.box的宽度

由于自身带了margin-right被挤下去了

用css3的nth-child(3n)解决办法

现在流行响应式布局，这种css3解决办法，在响应的时候并不靠谱

下面用margin负值解决办法

同理可以用margin-right负值。自己研究
对于新手，如果不需要考虑古代浏览器和响应式就用css3。反之用margin负值。

cocos2dx前端开发环境搭建|前端搭建开发环境搭建|sts前端开发环境

赞(0)

前端开发者 » 前端CSS开发:解决ul里最后一个li的margin问题

标签：前端开发者

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

立即登录注册

回顶部