Question

我尝试垂直对齐我使用span标签旁边的text field标签制作的菜单按钮。如果可能的话，我想在不向顶部应用固定保证金的情况下这样做。

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

我做错了什么？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以inline-block与li上的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>

exec

Answer 2

您需要做的就是编辑list-items的css和'.line'类：

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

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

Fiddle link.

如果您想通过浮动严格执行此操作，请将以下规则添加到您的css：

ul li:nth-child(2) {
  margin-top: 5px;
}

您还可以在列表项中添加一个新类，其中包含搜索字段，这样您就不必依赖于html层次结构。

Fiddle link.

在列表元素

2 个答案: