使用顶部/底部边距垂直对齐不同高度的元素

Question

我一直在尝试垂直对齐列表中的链接，其中除了一个链接之外的所有链接都有背景颜色/边框（看起来像一个按钮）。

即使这个小提琴上的代码有效，它也不尊重该链接（登录链接）的降低高度。

html body,
ul,
div,
li,
a {
  padding: 0;
  margin: 0;
}
.left {
  float: left;
}
.right {
  float: right;
}
.inner {
  height: 75px;
  background-color: grey;
}
a {
  color: white;
  text-decoration: none;
  font-weight: normal;
}
.logo {
  display: block;
  background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
  background-size: 150px 20px;
  background-position: left center;
  background-repeat: no-repeat;
  height: 100%;
  width: 150px;
}
.right-nav {
  height: 100%;
  display: inline-block;
  float: right;
}
ul {
  height: 100%;
  margin: 0;
}
ul li {
  height: 100%;
  float: left;
  display: table;
  margin: 0;
  padding: 0;
  line-height: 46px;
  margin-left: 20px;
}
ul li a {
  display: table-cell;
  vertical-align: middle;
  line-height: 46px;
}
.icon-user:before {
  content: "\e745";
}
a.button {
  height: 60px;
  background-color: #f38060;
  border-radius: 3px;
  border: 1px solid #f38060;
  box-sizing: border-box;
  color: white;
  display: table-cell;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  text-align: left;
  vertical-align: middle;
}

<div class="inner">
  <ul class="left">
    <li>
      <a class="logo" href="/"></a>
    </li>
  </ul>
  <div class="right-nav">
    <a class="mobile-menu right" href="#"><span class="icon-menu"></span>
    </a>
    <ul>
      <li><a href="/#">Link 1</a></li>
      <li><a href="/#">Link 2</a></li>
      <li><a href="/#">Link 3</a></li>
      <li>
        <a class="button" href="#" style="height: 60px;">Sign In
        <span class="icon-user"></span>
        </a>
      </li>
    </ul>
  </div>
</div>

JSFiddle 链接：http://jsfiddle.net/6er3aguk/

我想要实现的基本上是在该登录链接上有某种顶部/底部边距，因此它不会粘在周围 div 的顶部和底部。

关于如何实现这一目标的任何想法？

Answer 1

您可以通过将Sign In 文本和span 放在div 中并将与a.button 相同的样式应用于该div 来实现首选样式。

html body,
ul,
div,
li,
a {
  padding: 0;
  margin: 0;
}
.left {
  float: left;
}
.right {
  float: right;
}
.inner {
  height: 75px;
  background-color: grey;
}
a {
  color: white;
  text-decoration: none;
  font-weight: normal;
}
.logo {
  display: block;
  background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
  background-size: 150px 20px;
  background-position: left center;
  background-repeat: no-repeat;
  height: 100%;
  width: 150px;
}
.right-nav {
  height: 100%;
  display: inline-block;
  float: right;
}
ul {
  height: 100%;
  margin: 0;
}
ul li {
  height: 100%;
  float: left;
  display: table;
  margin: 0;
  padding: 0;
  line-height: 46px;
  margin-left: 20px;
}
ul li a {
  display: table-cell;
  vertical-align: middle;
  line-height: 46px;
}
.icon-user:before {
  content: "\e745";
}
#signin {
  max-height: 60px;
  background-color: #f38060;
  border-radius: 3px;
  border: 1px solid #f38060;
  box-sizing: border-box;
  color: white;
  display: table-cell;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  text-align: left;
  vertical-align: middle;
}

<div class="inner">
  <ul class="left">
    <li>
      <a class="logo" href="/"></a>
    </li>
  </ul>
  <div class="right-nav">
    <a class="mobile-menu right" href="#"><span class="icon-menu"></span>
    </a>
    <ul>
      <li><a href="/#">Link 1</a>
      </li>
      <li><a href="/#">Link 2</a>
      </li>
      <li><a href="/#">Link 3</a>
      </li>
      <li>
        <a class="button" href="#" style="
height: 60px;
                                          ">
          <div id="signin">Sign In<span class="icon-user"></span>
          </div>

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

Answer 2

这就是我将如何创建您正在寻找的效果。

这将使链接垂直居中，正确清除父级。并且不管浏览器的字体设置如何，如果窗口小于导航，它会在每个元素和容器的侧面之间以 15px 的间距停止收缩，而不是重叠或移动到新行。

这也完全避免了使用浮点数和display: table hack。

JSFiddle

*, *:before, *:after {
    box-sizing: border-box;
}
html body, ul, div, li, a {
    padding: 0;
    margin: 0;
}
.left, .right {
    position: absolute;
    top: 0; bottom: 0;
    white-space: nowrap;
}
.left {
    position: absolute;
    left: 15px;
}
.right {
    text-align: right;
    position: absolute;
    left: 172.5px;
    right: 0;
}
.inner {
    position: relative;
    height: 75px;
    background-color: grey;
}
ul {
    height: 100%;
    font-size: 0;
}
ul:before {
    content: " ";
    height: 100%;
}
ul:before,
ul li {
    display: inline-block;
    vertical-align: middle;
}
ul li a {
    font-size: 12pt;
    display: block;
    vertical-align: middle;
    color: white;
    text-decoration: none;
    font-weight: normal;
    padding: 10px 7.5px;
}
.right li:last-child {
    padding-left: 7.5px;
    padding-right: 15px;
}
.right a {
    border-radius: 3px;
}
.right a:hover {
    background: #888;
}
.icon-user:before {
    content:"\e745";
}
a.button {
    background: #f38060;
    color: white;
    padding: 10px 15px;
}
a.button:hover {
    background: #f98666;
}
a.logo {
    background-image: url(//placehold.it/150x20);
    background-size: 150px 20px;
    height: 20px;
    width: 150px;
    padding: 0px;
}

<div class="inner">
    <ul class="left">
        <li><a class="logo" href="/"></a></li>
    </ul>
    <div class="right">
        <a class="mobile-menu" href="#">
            <span class="icon-menu"></span>
        </a>
       <ul>
            <li><a href="/#">Link 1</a></li>
            <li><a href="/#">Link 2</a></li>
            <li><a href="/#">Link 3</a></li>
            <li>
                <a class="button" href="#">Sign In
                    <span class="icon-user"></span>
                </a>
            </li>
        </ul>
    </div>
</div>