这是我的代码: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 中排列。我尝试了我所知道的关于代码的一切,甚至查找了一些东西,但从来没有找到我需要什么来让这些图像继续下去,每张图片之间都有分离器。
最佳答案
如何将所有图像放在一个中 <div>
然后添加 left-padding
和 right-padding
到图像?这样您就不必过多地处理图像的对齐问题。
请注意,id 标签是唯一的。您不会在 html 文件中的任何地方使用它们。如果需要,请使用类
关于html - 无法让照片在 div 中彼此相邻对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37903900/