如何在CSS級別的div框？

Question

請看看這個鏈接：

http://jsfiddle.net/eJTGr/

如果最小化「的Javascript」區域，這樣的「結果」區域被放大，你會看到，這是兩個白色的箱子有灰色邊框旁邊的海誓山盟與最後的黑盒子稍微不符合要求。

這是如何符合兩個白色的盒子？

謝謝！

詹姆斯

Answer 1

添加vertical-align:bottom到.button1類。

.button1 { 
height: 35px; 
    width: 60px; 
    background: #151515; 
    border:1px solid; 
    border-color: #BDBDBD; 
    display: inline-block; 
    horizontal-align: center; 
    vertical-align:bottom; 
} 

原因：你的divs被定義爲inline-block。考慮他們像錶行。有時他們不採取相同的垂直對齊。

注：
.search字段1得到了verticle-align: center;而.search-場2得到了horizontal-align: center;，我認爲，不存在。

Answer 2

只需要給按鈕

position: absolute; 

但這不是我會做類似

.form-container { 
    position: relative; 
    float: none; 
    } 
.form-element { 
    float: left; 
    } 

</style> 

<div class="form-container"> 
    <form action="#" method="post" enctype="text/plain" 

    <div class="form-element"><input type="text" name="" /></div> 
    <div class="form-element"><input type="text" name="" /></div> 
    <div class="form-element"><input type="submit" name="" /></div> 

    </form> 

</div> 

Answer 3

嘗試去除標籤的display-inline的最佳途徑。然後爲每個添加float:left。從輸入中刪除vertical-align: 9px;。我還從按鈕1中刪除了margin-top:4px注意：中心標記已被棄用，因此請勿用於您的網站。

Check out demo here

Answer 4

<input type="submit" /> 

，而不是

<div class="button1" style="margin-top:4px;"></div> 

清潔代碼：http://jsfiddle.net/eJTGr/30/

HTML

<div id="wrapper"> 
    <div id="search-field1"> 
     <input type="text" name="search1" /> 
    </div> 

    <div id="search-field2"> 
     <input type="text" name="search2" /> 
    </div> 

    <input type="submit" /> 
</div> 

CSS

#wrapper { text-align: center; } 

#search-field1 { 
    height: 35px; 
    width: 320px; 
    border: 1px solid #BDBDBD; 
    display: inline-block; 
} 

#search-field2 { 
    height: 35px; 
    width: 320px; 
    border: 1px solid #BDBDBD; 
    display: inline-block; 
} 

input[type="submit"] { 
    height: 36px; 
    width: 60px; 
    border: 1px solid #BDBDBD; 
    display: inline-block; 
} 

input[type="text"] { 
    height: 35px; 
    width: 320px; 
    border:0px; 
} 

Answer 5

您可以設置.button1相對位置，並添加頂部屬性。這樣做可以讓您將按鈕向下移動幾個像素 - 在您的情況下爲6px。

你.button1類將是

.button1 { 
    height: 35px; 
    width: 60px; 
    background: #151515; 
    border:1px solid; 
    border-color: #BDBDBD; 
    display: inline-block; 
    horizontal-align: center; 
    position:relative; 
    top:6px; 
}