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

Question

#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>

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

Answer 1

也许您更喜欢 this.

<div id="nav-bar">
  <img src="http://dummyimage.com/80&text=1" alt="">
  <img src="http://dummyimage.com/80&text=2" alt="">
  <img src="http://dummyimage.com/80&text=3" alt="">
  <img src="http://dummyimage.com/80&text=4" alt="">
</div>

再也不用担心 img 元素的结束标签了。但一定要确保在 alt 属性中写下关于图像内容适合残障人士的内容。

html {
  font-size: 16px;
}

我正在使用 rems 进行大多数测量。 rems 基于基本字体大小。所以我们倾向于将其设置在html元素中。我认为现在 16px 是一个很好的标准。 1rem 因此是 16px.

使用这样的测量可以让你相对地安排事情。如果愿意，您也可以与 ems 互换。它们基于父元素字体大小。

#nav-bar {
  max-width: 1200px;
  width: 100%;
  margin: 2rem auto;
  text-align: center;
  background-color: white;
  border-radius: 1rem;
  display: inline-block;
  padding: .5rem;
}
#nav-bar img {
  display: inline-block;
}
#nav-bar img:not(:last-child) {
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 3px solid gray;
}

为了美观，我们可以将其完全推入 CSS，而不是使用 HTML 元素。

我在这些导航图像上使用右边框，并使用 not pseudo-class combined with last-child 作为 :not(:last-child) 选择除了最后一个图像之外的所有图像。所以你在最后看不到正确的边框。

Answer 2

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

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

，请使用class

Answer 3

试试这个：- 从 #naviSplitter

中删除 margin-left: 20px

<head>
    <style>
        #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;
        }
    </style>
</head>
<body>
    <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>
</body>

Answer 4

divs 不是您正在做的自闭标签，因此 无效 HTML 因此图像无法正常工作预期。

所以，我建议你忘记使用 div 来分割图像，只使用 HTML 列表，然后使用伪元素 ::before 代替。

要对齐，您需要 vertical-align:top，因为 inline-block 默认为 baseline

#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}
ul {
  font-size: 0
}
li {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  margin: 0 5px
}
li::before {
  background-color: gray;
  display: inline-block;
  vertical-align: top;
  height: 100px;
  left: -5px;
  width: 3px;
  content: "";
  position: relative
}

<div id="navBar">
  <ul>
    <li>
      <img id="img1" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img2" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img3" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img4" src="//dummyimage.com/100x100" />
    </li>
  </ul>
</div>

Answer 5

您的 HTML 无效。 div 标签无法以这种方式关闭。

<div />.

div 标签以这种方式正确使用。

<div></div>

由于缺少结束标记，您的图片和拆分器是嵌套的。发生这种情况是因为您的浏览器不知道如何显示您的页面，因为 opened/closed 标签不匹配。然后它会尝试通过在代码底部添加一堆结束标记来修复您的代码，每个打开的未关闭标记都有一个结束标记。

只需关闭 div 标签，您的图片就会正确对齐。您的 CSS 有效。

Answer 6

问题出在您的 HTML 上。 HTML 4.x.

中没有自闭div标签的概念

将此 <div id="navSplitter"/> 更改为 <div id="navSplitter"></div>。

或者我的建议是使用 <span></span> 标签添加拆分，因为 span 默认是 inline-block 元素。

希望这对您的问题有所帮助。

Answer 7

没有人谈论 FLEXBOX。还在为旧版 IE 而烦恼吗？

#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  width: 1200px;
display: flex;
justify-content: center;
align-items: center;
}
img { width: 100px; height: 100px; background: red; }
hr {
  border: none;
  background-color: gray;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
  width: 3px;
}

<div id="navBar">
  <img id="img1" src="img1.png" />
  <hr>
  <img id="img2" src="img2.png" />
  <hr>
  <img id="img3" src="img3.png" />
  <hr>
  <img id="img4" src="img4.png" />
</div>

Answer 8

我建议完全删除 navSplitter 元素，因为它们添加了一组额外的项目（不必要的），需要设置样式以确保图像对齐。相反，您可以单独为图像添加填充/边框，这将根据需要将它们分开。考虑以下因素：

.image {
  display: inline-block;
  height: 100%;
  padding: 20px;
  border-right: 3px solid gray;
}

.image:last-of-type {
  border-right: none;
}
#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}

<div id="navBar">
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
</div>

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

Can't get photos to align next to each other in div

html

css

image

navbar