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