带表格输入字段的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%; 
}