0

html ではアラインメントが複雑な場合があることを知っています。しかし、ここで私は戸惑うことがあります。テキスト、ボタン、画像を含む div があり、他のオプションはありません。

<div class="div-filter">

 <input type="text" value="Hladaj"/>
 <input type="submit" value="Hladaj"/>
 <img alt="image" id = "ShowOrHideImage" />

ここに画像の説明を入力

画像が cca 5px 高いのはなぜですか? 画像がない場合、テキストとボタンの上にパディングはありません。そこに画像を入れると……

明確にするために：

<style>
.div-filter
{
    background-color:rgb(235, 235, 98);
    width:100%;        
    border-bottom-width: 1px;   
    border-top-width: 1px;  
    border-left-width: 1px;  
    border-right-width: 1px; 
    border-bottom-color: black;   
    border-top-color: black;  
    border-left-color: black;  
    border-right-color: black;  
    border-bottom-style: solid;   
    border-top-style: solid;  
    border-left-style: solid;  
    border-right-style: solid;  
}

table と tableRow で解決できますが、うまくいきません。

4

1 に答える 1

2

これは、画像がフォントのベースラインに合わせて配置されるためです。

そのルールを追加したいかもしれません:

.div-filter img {
    vertical-align: bottom;
}

http://jsfiddle.net/QgBcU/

于 2012-12-03T10:04:31.337 に答える