Question

我试图在单个div元素<nav_bar>中对齐多个图像。这些图像将充当网站上不同网页的导航链接。问题是，最初我能够使用放入css的值来定位（home）图像。然而，当我放置第二张图像（computericon）时，它就落后于（家庭）图像。为了解决这个问题，我给了他们一个位置：内联;属性。现在我不能按照自己的喜好移动任何一个图像。他们只是卡在那里。没有任何填充或边距调整使它们移动。解决这个问题肯定很容易，但我对网站设计和开发都很陌生，所以我似乎无法解决这个问题。任何形式的帮助将不胜感激。

谢谢。

这是html代码：

<div id = "nav_bar">
<img id= "home" src= "home.png" height= "50px" width= "70px">
<img id= "pc" src= "computericon.png" height= "50px" width= "70px">
</div>

这里是CSS代码：

#home {

left: 188px;

position: inline;

}

#MAIN_CONTENT_CONTAINER {

padding-top: 20px;

}

#nav_bar {

height: 60px;
background-color: #3c3c3c;
margin-left: 10px;

}

#home:hover {

background-color: #b4e1cf;

position: inline;

}

#computericon {

left: 80px;

position: inline;

}

已附加图片。The two icons are just stuck there.

Answer 1

尝试：

position: relative;
float: left;

在这些图片之后添加div样式display:block;clear:both（以清除浮动）。删除左属性。

Answer 2

没有position: inline;之类的东西。您应该使用position: relative;，但left坐标将从前一个元素的框侧开始计算。根据您需要实现的目标，最好使用

display: inline-block;
vertical-align: middle;

在他们身上，只使用边距或填充，忘记left等。

Answer 3

首先，当您要求某些内容包含JSFiddle而不是仅仅在答案中粘贴整个代码时，这总是一个好主意。我为你做了，并冒昧地改变图像以更好地显示结果：https://jsfiddle.net/2fjg6g3r/

<小时/> 正确的选择是内联块，我在小提琴中使用的内容。

#nav_bar > img {
  display: inline-block;
  height: 100%;
  width: auto;
  margin-right: 5px;
}

我也注意到您一次只选择一个元素，所以我建议您查看更多的CSS选择器，以使您的代码更清晰，重复性更低。

Answer 4

我认为您的一个问题是您使用错误的ID呼叫您的第二张图片。我将id更改为你在css中调用的内容，然后在两个导航项中添加了一个类。这是你在找什么？

#MAIN_CONTENT_CONTAINER {

padding-top: 20px;

}

#nav_bar {
  height: 60px;
  background-color: #3c3c3c;
  margin-left: 10px;
}

.navItem {
  margin-left: 20px;
  margin-top: 5px
}

.navItem:hover {
  background-color: #b4e1cf;
}

<div id = "nav_bar">
  <img id="home" class="navItem" src= "home.png" height= "50px" width= "70px">
  <img id="computericon" class="navItem" src= "computericon.png" height= "50px" width= "70px">
</div>

希望这有帮助！

在单个<div>元素中对齐多个图像

4 个答案: