垂直对齐不同高度的元素，边距 top/bottom

Question

我一直在尝试垂直对齐列表中的 links，其中 links 中除了一个之外的所有 links 都有背景 color/border（看起来像一个按钮）。

尽管此 fiddle 上的代码有效，但它不考虑 link（登录 link）的高度降低。

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 link: http://jsfiddle.net/6er3aguk/

我想实现的基本上是在登录 link 上有某种 top/bottom 边距，这样它就不会粘在周围的顶部和底部 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

这就是我创建您正在寻找的效果的方式。

这将使链接垂直居中，正确清除父项。并且无论浏览器的字体设置如何，如果 window 小于导航，在它的最小宽度下它将停止收缩每个元素和容器两侧之间的 15px 间距，而不是重叠或移动到新的行。

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

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>

垂直对齐不同高度的元素，边距 top/bottom

Vertical align elements of different heights with top/bottom margin

html

css

vertical-alignment