列表元素

Question

內（鏈接）標籤我試圖垂直對齊的菜單按鈕，我已經使用span標籤製造中垂直對齊跨度旁邊一個text field到我做了。我想這樣做不應用一個固定的利潤率頂端如果可能的話。

這裏是我寫的代碼示例： 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垂直對齊。也使ainline-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>

Answer 2

垂直邊距所有你需要做的是編輯列表項的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.

我F你想通過浮動做嚴格，然後添加下面的規則你的CSS：

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

您也可以在裏面添加一個新類的列表項與搜索字段，這樣你不噸有依賴於HTML層次。

Fiddle link.