html - 无法让照片在 div 中彼此相邻对齐

Question

这是我的代码:http://pastebin.com/pDkM4FQi

#img1,
#img2,
#img3,
#img4 {
  display: inline-block;
  height: 100%;
}
#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}
#navSplitter {
  background-color: gray;
  display: inline-block;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
  width: 3px;
}

<div id="navBar">
  <div id="navSplitter" style="background-color: black;" />
  <img id="img1" src="img1.png" />
  <div id="navSplitter" />
  <img id="img2" src="img2.png" />
  <div id="navSplitter" />
  <img id="img3" src="img3.png" />
  <div id="navSplitter" />
  <img id="img4" src="img4.png" />
</div>

我无法让图像在 navBar div 中排列。我尝试了我所知道的关于代码的一切，甚至查找了一些东西，但从来没有找到我需要什么来让这些图像继续下去，每张图片之间都有分离器。

Answer 1

如何将所有图像放在一个中 <div>然后添加 left-padding和 right-padding到图像？这样您就不必过多地处理图像的对齐问题。

请注意，id 标签是唯一的。您不会在 html 文件中的任何地方使用它们。如果需要，请使用类