html - 在列表元素内的(链接)标签内垂直对齐跨度

Question

我正在尝试垂直对齐我使用 span 标记制作的菜单按钮，它位于我制作的 文本字段 旁边。如果可能的话，我想在不对顶部应用固定边距的情况下执行此操作。

这是我编写的代码示例: https://jsfiddle.net/dLbdxa4j/3/

我做错了什么？

ul {
  list-style: none;
  height: 40px;
}

li {
  float: left;
  margin: 0 5px;
}

.line {
  width: 22px;
  height: 3px;
  background: black;
  display: block;
  margin: 4px 0 0;
}

input[type="text"] {
  height: 30px;
}

<div>
  <ul>
    <li>
      <a>
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </a>
    </li>
    <li>
      <input type="text" value="Search me!" />
    </li>
  </ul>
</div>

Answer 1

您可以在 li 上使用 inline-block 和 vertical-align 或使父级 flex 并使用 align-items 将它们垂直对齐。还要制作 a inline-block 以便考虑到 .line

上的垂直边距，它可以正确居中

ul {
  list-style: none;
  height: 40px;
}

li {
  margin: 0 5px;
}

.inlineBlock li {
  display: inline-block;
  vertical-align: middle;
}

.flex {
  display: flex;
  align-items: center;
}

.line {
  width: 22px;
  height: 3px;
  background: black;
  display: block;
  margin: 4px 0 0;
}

li a {
  display: inline-block;
}

input[type="text"] {
  height: 30px;
}

<ul class="flex">
  <li>
    <a>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </a>
  </li>
  <li>
    <input type="text" value="Search me!" />
  </li>
</ul>



<ul class="inlineBlock">
  <li>
    <a>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </a>
  </li>
  <li>
    <input type="text" value="Search me!" />
  </li>
</ul>