html - Div 内容对齐 - 内容大于容器且位置错误

Question

我有两个问题，但我会把它们描述为一个，因为我觉得它们是相关的。这是我的代码(这与正在查看的大小 +1200px 有关):

http://jsfiddle.net/45Lbvejd/6/embedded/result/

问题 1: 包含搜索框 (.b) 的 div 的高度低于其中的内容。它应该是 46px。我认为这与花车有关。

问题 2:搜索框应与右侧的按钮垂直对齐，但搜索框位置太低。我再次认为这与花车有关。

这是我的标记:

<header>
    <div id="a" class="left"> <a href="#"><img src="#"></a>

    </div>
    <div id="b" class="left">
        <input id="keyword" class="testinput" placeholder="Keyword">
    </div>
    <div id="c" class="right"><a href="a.html" class="btnj">A</a>

    </div>
</header>
<div id="d">-</div>

部分 CSS:

/* Blocks */
 #a, #b, #c, #d {
    padding: 0px 15px;
}
/* Top Blocks */
 #a, #c {
    width: 100px;
    height: 46px;
    line-height: 46px;
    position: absolute;
}
#a img {
    height: 46px;
    width: 46px;
    display: block;
}
#b {
    width: 100%;
    margin-top: 60px;
    height: 46px;
    line-height: 46px;
}
#c {
    right: 0;
}
#d {
    width: 100%;
    position: absolute;
    top: 120px;
}
@media (min-width: 520px) {
    .testinput {
        width: 47%
    }
    #location {
        float: right;
    }
    #keyword {
        float: left;
    }
    #d {
        top: 120px;
    }
    .job .logo {
        display: inline-block;
    }
}
@media (min-width: 840px) {
    #b {
        margin-top:0;
        padding: 15px 100px;
    }
    .testinput {
        width: 320px;
    }
    #d {
        padding: 0px 100px;
    }
}
@media (min-width: 1200px) {
    #d {
        padding: 0px 165px;
    }
    #b {
        padding: 15px 165px;
    }
}
.left {
    float: left;
}
.right {
    float: right;
}

Answer 1

这就是你想要的样子吗？ <强> jsFiddle demo 。很多padding-top和 padding-bottom应用于.b div 使用 CSS，这就是为什么它被向下推，超出了指定的高度 46px .我删除了所有填充，而是使用了 margin-top: 5px将搜索框与右侧的按钮垂直对齐。