带有表单输入字段的CSS3多列列表

Question

我有一个CSS3多列列表，其中的输入字段位置不正确。 它应与上面的列表项对齐 - 即使更改视口时也是如此。

当视口更改时，输入表单独立于其他列表项移动。

是否可以将输入字段定位，使其与上面的列表项垂直对齐？

<ul class="subnav-links">
  <li class="new-in ">
    <a href="/de/t/new">New In</a>
  </li>
  <li class="sale ">
    <a href="/de/t/sale">Sale</a>
  </li>
  <li class="looks ">
    <a href="/de/pages/best_looks">Looks</a>
  </li>
  <!-- ...more lis omitted-->
</ul>

和CSS：

ul.subnav-links {
  -moz-column-count: 8;
  -webkit-column-count: 8;
  column-count: 8;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-gap: 0;
  list-style-type: none;
}
li {
  display: inline-block;
  max-width: 90%;
  width: 100%;
  word-break: keep-all;
}
form {
  float: right;
}

JSfiddle Demo

Answer 1

我认为你应该像这样设置表单和输入字段的最大宽度：

ul.subnav-links li form, ul.subnav-links li form input{
    max-width:100%;
}