html - テキスト入力の配置？

Question

私はフォームをあまり使用していないので、ここで何が起こっているのかわかりません。ボタンを使用してテキスト入力をインラインに配置しようとしていますが、機能しないようです。あなたは私がここで何をしているのかを見ることができます：http： //jsfiddle.net/gagalug/BEBAH/

ありがとう。

Answer 1

追加

input { vertical-align: middle; }

Answer 2

次の行をスタイルに追加します。

img, input[type=image] {vertical-align: bottom;}

これにより、画像と画像入力のベースラインの問題が回避されます。あなたの問題を即座に解決します。

ほら、もっと多くの人がこれについて本当に知るべきです。QuirksMode と同じくらい大きなサイトを書いている人でさえ、この事実を知りません。

Answer 3

さまざまな方法があります。

1. 親 div に対する相対位置と子に対する絶対位置。

2. 垂直整列: 中央; 両方の入力用

Answer 4

ねえ、あなたはこれが欲しいと思う

オプションは、 vertical-align:top; を定義するだけ です。

#text{
    height: 40px;
    vertical-align: top;

}

ライブデモhttp://jsfiddle.net/BEBAH/4/

Answer 5

以下のように CSS を変更します。

div{
        border: 1px solid black;
        width: 500px;
        height: 50px;
        float:left;
    }
    #text{
        height: 40px;
        top: 0px;
        float:left;
    }