CSS中的浮动列表边距
[英]Floated List Margin in CSS
问题描述
I have a div that is 320px wide. 
我有一个320px宽的div。 I'm floating list items to the left, each with a width of 100px. 我是左侧的浮动列表项，每个项目的宽度为100px。 I then want to have a right margin of 10px to the right of each list item. 然后我想在每个列表项的右边有一个10px的右边距。 All other margins and padding has been removed. 所有其他边距和填充都已删除。
So, I basically want 3 list items per row before it goes onto the next line. 所以，在进入下一行之前，我基本上每行需要3个列表项。 But because there is a margin-right on the 3rd item (ie all items) it goes onto the next line (so only 2 items per line). 但是因为第3个项目（即所有项目）都有一个保证金权限，所以它会进入下一行（因此每行只有2个项目）。
Is there a way to have 3 items per row in this instance, without creating extra classes or using scripts. 有没有办法在这个实例中每行有3个项目，而无需创建额外的类或使用脚本。
6 个解决方案
解决方案1
4 2009-07-10 01:51:09
Using CSS3 selectors : 使用CSS3选择器 ：
ul:nth-child(3n) { margin-left: 0px; ... }
ul:nth-child(3n+1) { margin-left: 10px; ... }
ul:nth-child(3n+2) { margin-left: 10px; ... }
May not be practical due to lack of CSS3 support. 由于缺乏CSS3支持，可能不实用。
解决方案2
2 2009-07-10 01:45:48
Does your div have to be 320px wide? 你的div必须是320px宽吗？ The simplest solution would be to make the div 330px wide. 最简单的解决方案是使div 330px宽。 If its container is only 320px, you can use something like margin-right: -10px . 如果它的容器只有320px，你可以使用margin-right: -10px 。
解决方案3
0 2009-07-10 01:46:03
As far as I know, it is not possible without using classes to identify the last item in each row (which you can easily do if you generate the list using a scripting language). 据我所知，如果不使用类来识别每一行中的最后一项（如果使用脚本语言生成列表，则可以轻松完成）是不可能的。 Else, you can divide the margin-left into 20px / 3 = 6px or increase the width of the <div> to 330px so that it would accomodate the extra margin. 否则，您可以将margin-left划分为20px / 3 = 6px或将<div>的宽度增加到330px，以便它可以容纳额外的边距。
解决方案4
0 2009-07-10 02:15:28
Here's an option that works in IE6 and up (possibly IE5+ - I haven't tested that). 这是一个适用于IE6及以上的选项（可能是IE5 + - 我还没有测试过）。
Note that this will only work for 3 items. 请注意，这仅适用于3个项目。 A 4th item will get the 10px left margin applied and a 6th item will be pushed to the next row at the moment. 第4项将获得10px左边距，此时第6项将被推到下一行。 I'm sure someone smarter than me can figure it out. 我敢肯定比我更聪明的人能搞清楚。
I'm using expressions (which I guess are scripts - but may work for you) and conditional comments to get the first child in IE6. 我正在使用表达式（我猜是脚本 - 但可能适合你）和条件注释来获取IE6中的第一个孩子。 Enjoy: 请享用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Columns test</title>
<style type="text/css" media="screen">
#container {
border: 1px solid red;
width: 320px;
overflow: hidden;
}
.column {
margin-left: 10px;
width: 100px;
float: left;
background: #ccc;
}
.column:first-child {
margin-left: 0;
}
</style>
<!--[if IE 6]>
<style type="text/css" media="screen">
.column {
margin-left: expression((this===this.parentNode.childNodes[0])?"0":"10px");
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div class="column">
<p>Column 1</p>
</div>
<div class="column">
<p>Column 2</p>
</div>
<div class="column">
<p>Column 3</p>
</div>
</div>
</body>
</html>
解决方案5
0 2010-07-11 15:02:20
使用wordpress可以通过在“wordpress循环”中添加几个位来完成...解决方案： http ： //wordpress.org/support/topic/368646
解决方案6
-2 2009-07-10 01:41:56
.divFloat { margin-left: 10px; ...}
.divFloat:First {margin-left: 0; ...}
If above not working, try to make the width to be 99px instead and be sure to remove any border of the divs. 如果上面没有工作，请尝试使宽度为99px，并确保删除div的任何边框。 sometimes the browser may have some rounding or so problem that you can't really expect their behavior. 有时浏览器可能会有一些舍入或类似的问题，你不能真正期望他们的行为。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.