div横排如何设置间距啊？

在一个div放很多的div，就是横排，比如每排5个，我想请教的是如何设置每个div之间的间距一样，而且每排的第1个div距离外层div左边的距离与每排的第5个div距离外层div右边的距离也是和间距一样的，要兼容主流浏览器啊？一直没有找到设置的好办法。谢谢了

10 个解决方案

#1

外面的div宽度固定了没？
固定了就好设啊
不固定就比较困难

#2

要不用table好了，设置width

#3

你可以用margin,或者padding设置，如果实在不懂怎么设置，你可以把问题说的详细一点，或者打上一段代码，说明一下，我可以帮你解决哦

#4

<style type="text/css">

*{

margin:0px;

padding:0px;

}

div

{

float:left;

width:50px;

height:50px;

border:1px solid red;

margin:6px 3px;

}

</style>


<div style="border:1px solid blue;width:296px;height:64px;float:none;">

    <div style="margin-left:6px;">1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

    <div style="margin-right:6px;">5</div>

</div>

#5

试一下用CSS样式控制，将那五个DIV的margin设置成一样，然后设置外面那个DIV的PADDING

#6

楼上正解
不过IE要hack一下

#7

margin和padding都可以

#8

最外围div设定padding值，里面前4个设margin-right值。里面的div都要有浮动外加display:inline;兼容ie6。

#9

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div {
display:inline;
float:left;
width:50px;
height:50px;
border:1px solid red;
margin:6px 3px;
}
</style>
</head>
<body>
<div style="border:1px solid blue;width:296px;height:64px;">
  <div style="margin-left:6px;">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div style="margin-right:6px;">5</div>
</div>
</body>
</html>
[/Quote]
修改一下四楼的写法，能兼容各大浏览器，要注意一下IE下边距的双倍bug，记得加上display:inline;

#10

引用 9 楼 qq675845810 的回复:

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-eq……

#1