Html Divs：相等的水平间距

我正在创建一个网站，在主页上有一系列的四幅图片，用作导航，下面有一幅大图片

<div style="width: 696px">
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink"></div>
</div>

<div style="width:696px">
...
</div>

...

“imglink”div的宽度为160px

我希望顶部div中的图像在div内部水平均匀分布，两个外部div与下面图像的边缘齐平。我已经试了几个小时的浮动、边距、填充等等，但都没办法解决

---

谢谢你的帮助

我会区分第一个和最后一个div

<div class="imglink_first"></div>
<div class="imglink"></div>
<div class="imglink"></div>
<div class="imglink_last"></div>

或者，您可以将CSS选择器与

：first child

和

：last child

一起使用

<div class="image-row" style="width: 696px">
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
</div>

.imglink{
   float: left;
   margin: 0px 9px;
}

.image-row:first-child, .image-row:last-child{
   margin: 0px;
}

伊姆林克先生{
浮动：左；
利润率：0px 9px；
}
.图像行：第一个子项，.图像行：最后一个子项{
边际：0px；
}

---

尽管并非所有浏览器都支持这一点。

这里是您的出发点

如果您知道菜单项的数量，请将每个菜单项包装在一个div中。然后将菜单div宽度设置为宽度的百分比，并将文本居中对齐。即

对于4个菜单选项：

css

html

<div class="image-row" style="width: 696px">
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
   <div class="imglink"></div>
</div>

.imglink{
   float: left;
   margin: 0px 9px;
}

.image-row:first-child, .image-row:last-child{
   margin: 0px;
}

#menu div{
  width:25%;
  text-align:center;
  display:inline-block;
}

<div id='menu'>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
  <div><a href='#'>link</a></div>
</div>