Question

我有一个导航菜单，其中包含一个标识，一个相应的名称，一个垂直边框作为分隔符，以及实际的导航链接。虽然标识和相应的名称似乎正确对齐，但垂直边框和导航链接不是。相反，它们偏离5个左右的像素（我在Photoshop中检查过）。

我的问题是：如何确保所有导航元素都正确对齐，这意味着它们在导航栏中垂直居中？

body {
  margin: 0;
}


/* Limit container width to 1200px */

.container {
  max-width: 1200px;
  margin: 0 auto;
}

nav {
  background-color: #414b55;
}

.navigation {
  overflow: hidden;
}

.logotype img {
  margin: 10px 10px 10px 15px;
}

.logotype p {
  display: inline;
  vertical-align: middle;
  font-weight: 700;
  font-size: 24px;
}

.divider {
  display: inline;
  border-left: 1px solid #ffffff;
  margin-left: 30px;
  margin-right: 20px;
}

.navigation a {
  display: inline;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

.item {
  padding: 15px 15px;
  font-size: 18px;
  font-weight: 700;
}

.navigation .icon {
  display: none;
}

<body>
  <nav>
    <div class="container">
      <div class="navigation" id="script-target">
        <a href="index.html" class="logotype">
          <img src="img/logotype.svg" alt="logotype" height="40px" style="vertical-align: middle">
          <p>Exception</p>
        </a>
        <div class="divider"></div>
        <a href="index.html" class="item">Select</a>
        <a href="index.html" class="item">Select</a>
        <a href="index.html" class="item">Select</a>
        <a href="index.html" class="item">Select</a>
        <a href="javascript:void(0);" class="icon" onclick="collapse()"><img src="img/icon.svg" alt="menu" height="26px"></a>
      </div>
    </div>
  </nav>
</body>

更新我更改了显示属性，现在所有导航元素都正确对齐。 https://jsfiddle.net/MihkelPajunen/4zjbgLLk/4/

Answer 1

您可以通过在分隔符类的底部添加一些填充来解决此问题：

https://jsfiddle.net/nb4o9p84/

.divider {
    display: inline;
    border-left: 1px solid #ffffff;
    margin-left: 30px;
    margin-right: 20px;
        padding-bottom: 5px;
}

编辑：由于您可能希望所有元素对齐（不仅仅是菜单链接），这里是一个更新的小提琴，所有元素通过边距对齐并消除“内联”：

https://jsfiddle.net/yLctgbcw/

.logotype img {
     margin: 7px 10px 12px 15px;
}

.logotype p {
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    font-size: 24px;
    margin-top: -5px;
    margin-bottom: 0;
}

编辑2：似乎小提琴或其他地方可能存在错误，因为菜单之间的水平距离偏离1px - 但距离将根据视口的宽度而变化。

如果添加“margin-right：-4px;”在.item类中，它将在4个中的1个之间留下1px的空间，并且在调整窗口大小时间隙将移动： https://jsfiddle.net/42j3e8jp/

如果添加-5px，间隙消失（但很可能仍然存在1px差异）：

https://jsfiddle.net/8udb4eqn/

老实说，除非你在a中添加红色背景以真正显示问题，否则这是任何人都不会注意到的问题之一。就个人而言，我要么重构你的代码来使用像Bootstrap这样的库所使用的“传统”菜单设置： https://getbootstrap.com/docs/3.3/examples/navbar/

<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>

或者，我会忘记1px的差异并继续前进，因为确定问题可能比重构代码花费更长的时间。我已经了解到CSS / HTML中有很多小怪癖（特别是跨浏览器），所以除非你的1px差异明显，否则通常不值得付出努力。

导航元素不是垂直对齐的

1 个答案: