Question

感谢这个绝佳的机会。

我遇到一个问题，由于前端开发技能有限，我现在很难解决问题：我正在尝试使用按钮垂直对齐链接。

HTML here：

<nav>
    <div class="header_info">
        <ul>
            <li><a href="#">Get Help</a></li>
            <li><a href="#">Contact Us</li></a>
            <li><a href="#">Suggestions</li></a>
        </ul>
    </div>
    <div id="header-login">
        <div class="current header_user_info"><button><a href="#">test</a></button></div>

这里有CSS：

.header_info{
    position: relative;
    margin: 0 10px;
    color: #7E7E7E;
    font-weight: bold;
    cursor: pointer;
    padding-left: 0;
    padding-right: 0;
    list-style:none;
    float: left;
}

.header_info ul{
     display: inline-block;
     list-style: none;
}


.header_info li{
    display: inline;
    margin-right:11px;
}

.header_info li :hover{
    color: #F98866;
}

.header_info a{
    color: #7E7E7E;
}

正如您所看到的，链接和按钮不在同一条线上，我想解决这个问题，以便它看起来整洁而专业。

我很感激我的代码的任何帮助/增强。

感谢。

JSFIDDLE ==＆gt; https://jsfiddle.net/5nzvwwjx/5/

Answer 1

您可以在display: flex; align-items: center;

上使用nav

nav {
  display: flex;
  align-items: center;
}

.header_info {
  position: relative;
  margin: 0 10px;
  color: #7E7E7E;
  font-weight: bold;
  cursor: pointer;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
  float: left;
}

.header_info ul {
  display: inline-block;
  list-style: none;
}

.header_info li {
  margin-right: 11px;
  display: inline;
}

.header_info li:hover {
  color: #F98866;
}

.header_info a {
  color: #7E7E7E;
}

<nav>
  <div class="header_info">
    <ul>
      <li><a href="#">Get Help</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Suggestions</a></li>
    </ul>
  </div>
  <div id="header-login">
    <div class="current header_user_info">
      <button><a href="#">test</a></button>
    </div>
  </div>
</nav>

或者，您可以制作.header_info和#header-login display: inline-block;，这会使他们当前居中，但如果您添加更多内容，使用vertical-align: middle;会保持对齐。

.header_info {
  position: relative;
  margin: 0 10px;
  color: #7E7E7E;
  font-weight: bold;
  cursor: pointer;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
}

nav > div {
  display: inline-block;
  vertical-align: middle;
}

.header_info ul {
  display: inline-block;
  list-style: none;
}

.header_info li {
  margin-right: 11px;
  display: inline-block;
  vertical-align: middle;
}

.header_info li:hover {
  color: #F98866;
}

.header_info a {
  color: #7E7E7E;
}

<nav>
  <div class="header_info">
    <ul>
      <li><a href="#">Get Help</a></li>
      <li><a href="#">Contact Us<br>second line</a></li>
      <li><a href="#">Suggestions</a></li>
    </ul>
  </div>
  <div id="header-login">
    <div class="current header_user_info">
      <button><a href="#">test</a></button>
    </div>
  </div>
</nav>

Answer 2

您可以将按钮移动到ul列表中，如下所示：

<nav>
    <div class="header_info">
        <ul>
            <li><a href="#">Get Help</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Suggestions</a></li>
            <li class="current header_user_info"><button><a href="#">test</a></button></li>
        </ul>
    </div>
</nav>

如果您还需要它们进行样式设置，我还会将这些类移到li上。

Answer 3

我把你的小提琴分到了这里：https://jsfiddle.net/yyb7p8o9/

我清理了HTML，这有一些小问题。然后，我在CSS中为“header_info ul”添加了一个0px边距：

.header_info ul{
     display: inline-block;
     list-style: none;
   margin: 0px
}

如何垂直对齐div中的链接和按钮？

3 个答案: