html - 菜单项略微倾斜？

Question

我正在构建菜单，最后一项“立即预订”稍微倾斜(向下推)。我所做的只是添加一个边框，这似乎打破了完美的水平对齐方式。有什么办法可以解决这个问题吗？

Codepen

HTML:

  <div class="navibar">
    <a class="logo" href="#">Logo</a>

    <ul class="left-bar">
      <li>
        <a href="#">ACCOMMODATIONS</a>
      </li>
      <li>
        <a href="#">DINING</a>
      </li>
      <li>
        <a href="#">SPA & WELLNESS</a>
      </li>
            <li>
        <a href="#">MEETINGS & EVENTS</a>
      </li>
       <li>
        <a href="#">ADVENTURES</a>
      </li>
    </ul>

    <ul class="right-bar">
      <li>
        <a class="btn btn-ghost" href="#">BOOK NOW</a>
      </li>
    </ul>
    <div style="clear:both"></div>

  </div>

CSS:

  * {
      list-style: none;
      margin: 0px;
      padding: 0px;
      text-decoration: none;
    }

    .navibar {
      margin: 0 auto;;
      width: 1100px;
      background: rgba(18, 23, 26, 0.4);
      padding: 20px;
    }

    .navibar li a {
      color: white;
      display: inline-block;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .logo {
      float:left;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 10px;
      padding-right: 100px;
    }

    .navibar li {
      float: left;
    }
    .left-bar {
      float: left;
    }
    .right-bar {
      float: right;
    }

    .btn:link,
    /*Prevents color change when clicked */

    .btn:visited {

      /*<a> is a inline element which doesn't allow padding, so need to change to inline-block */

      /* 10 on top and bottom and 30 left and right */
      font-weight: 300;
      word-spacing: 3px;
      font-family: brandon-grotesque;
      text-decoration: none;
      /*Takes away line on bottom of words */
      transition: background-color 0.2s, border 0.2s, color 0.2s;
      /* makes color subtly change instead of instantly. More applealing */
    }

    .btn-full:link, .btn-full:visited {
      background-color: #fff;
      /* From flat UI colors */
      border: 1px solid #fff;
      color: #fff;
      margin-right: 10px;
    }

    .btn-ghost:link, .btn-ghost:visited {
      border: 2px solid #fff;
      color: #fff;
    }

我可能是错的，但我很确定 Borders 不会添加填充或边距。

填充文本，因为 Stack Overflow 说我需要更多文本。真的吗？

Answer 1

只需使用负边框宽度的 margin-top

.btn-ghost:link, .btn-ghost:visited {
  border: 2px solid #fff;
  margin-top: -2px;
  color: #fff;
}

在边框之前它们是对齐的，但是 2px 边框将元素向下推 2px。如果愿意，您可以将元素向上移动或为其他元素添加不可见的边框或边距