Question

我正在努力使用html标记和css将导航栏与我的徽标内联。这就是我所拥有的（需要在宽屏上观看）：

http://jsfiddle.net/ewz5r7k6/3/embedded/result/

HTML

<header>
    <nav class="container"> <a href="index.html"><img src="http://s2.hulkshare.com/song_images/original/7/0/6/706218dbe06e5490bacd92adf773c870.jpg?dd=1388552400"></a>

        <form class="search">
            <input type="text" class="input text" placeholder="Keyword">
            <input type="text" class="input text" placeholder="Location">
            <input type="submit" class="btn submit">
        </form>
    </nav>
</header>

CSS

html, body {
    height: 100%;
}
a {
    text-decoration: none;
}
.container {
    padding-left: 40px;
    padding-right: 40px;
}
header {
    padding-top: 30px;
    padding-bottom: 30px;
}
header nav {
    height: 50px;
    line-height: 50px;
}
header ul {
    float: right;
}
header ul li {
    display: inline-block;
}
header ul li a {
    color: rgb(58, 64, 70);
    display: block;
    font-family:'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif;
    font-size: 13px;
    height: 21px;
    line-height: 21px;
    margin-left: 25px;
    text-decoration: none;
    padding-left:15px;
    padding-right:15px;
}
header ul li a.active {
    color: #f16162;
}
header img {
    height: 50px;
}
.input {
    margin:0;
    padding: 10px 12px;
    font-weight: 300;
    border-radius: 3px;
    box-sizing: border-box;
    vertical-align:middle;
}
.search {
    display: inline-block;
}
.search .text {
    width: 300px;
    margin-right: 30px;
    ;
}
.search .submit {
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    height: 38px;
    width: 60px;
    vertical-align:middle;
}
.btn {
    border-radius: 3px;
    background-color: black;
    color: #fff;
    border: 0;
    text-decoration: none;
}
.right {
    float:right;
}

通过对表单使用display:inline-block;，是实现此布局的最干净，最语义的方法吗？看来我可能会把所有东西都浮到左边，我不知道什么是最好的方法。
我应该如何在导航栏中垂直居中表单，line-height是正确的标记，还是有更好的方法？

Answer 1

没有“最佳”方式并排放置元素。这完全取决于具体情况，但inline-block和float: left都是可行的选择。为了方便起见，我通常坚持使用内联块，直到我真的需要浮动。 Floats倾向于需要额外的规则来防止副作用，比如必须清除它们或修复溢出问题。

使用内联块时的垂直居中通常使用vertical-align完成，尽管这在很大程度上取决于具体情况。如果你问我，垂直对齐是CSS中最烦人的事情之一。然而，对于你的例子来说，结果很简单：

.search {
    display: inline-block;
    vertical-align: top;
}

足以使表单与徽标对齐。

Answer 2

只需将 img 标记设置为垂直对齐即可解决问题

img
{
vertical-align:middle;
}

参见 DEMO

请参阅以下链接以便更好地理解：float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

如何垂直对齐表单和图像

2 个答案: