Div內容對齊 - 內容大於容器且位置錯誤

Question

我有兩個問題，但我會將它們描述爲一個，因爲我覺得它們是相關的。這是我的代碼（這是與規模正在查看+ 1200像素）：

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

問題1：保存搜索框格（.B）比它裏面的含量少，高。我應該是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; 
} 

任何幫助，將不勝感激。

James

Answer 1

這是你想要的嗎？ jsFiddle demo。很多padding-top和padding-bottom被應用於.b div使用CSS，這就是爲什麼它被推下，超出它的指定高度46px。我刪除了所有的填充，而是使用margin-top: 5px垂直對齊搜索框與按鈕的右側。