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，从而实现首选样式。< / p>

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黑客。

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>

垂直对齐不同高度的元素，顶部/底部边缘

2 个答案: