在列表元素内的（链接）标签内垂直对齐跨度

Question

I'm trying to vertically align a menu button I've made using span tags next to a text field I've made. I would like to do it without applying a fixed margin to the top if possible.

Here is an example of the code I've written: https://jsfiddle.net/dLbdxa4j/3/

What am I doing wrong?

 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

You can use inline-block on the li 's with vertical-align or make the parent flex and use align-items to align them vertically. Also make the a inline-block so it's centered properly taking into consideration the vertical margin on .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

All you need to do is edit the css for list-items and the '.line' class:

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.

If you want to do it strictly through floating, then add the following rule to your css:

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

You can also add a new class to the list-item with the search-field in it so that you don't have to depend on html hierarchy.

Fiddle link.