<span>と同じ高さにする方法の<input type =「text」>を

私はしかし、私は彼らに同じ高さを作り、それぞれに合わせて見えることはできません、要素の左にある要素を入れしようとしていますその他。スパンは常に少し高いようです。<span>と同じ高さにする方法の<input type =「text」>を

誰でもアイデアがありますか？

輝き*

編集：HTMLセクション

<label for="name">Username: </label> 
<input type="text" name="name" id="name" value="" maxlength="15"/> 
<span id="box" style="display:none"></span>

CSS

span.box{ 
    position:absolute; 
    width:100px; 
    margin-left:20px; 
    border:1px; 
    padding:2px; 
    height: 16px; 
} 

input.name { 
    width: 115px; 
    height: 14px; 
}

出典

2010-11-18 Sparkles

はあなたのコードの一部を入れてください、解決策は、タグの種類によって異なりますが、 –

を使用し、してみてくださいラベルタグ（http://www.w3schools.com/tags/tag_label.asp） –

あなたが縦に同じラインでアイテムを揃えたい場合、あなたはおそらくがない必要性を行いますそれらを同じ高さにする - ちょうどそれらにvertical-alignプロパティのための同じ値を与えてください。

垂直整列が垂直真ん中に整列させるためのものにするために、その行のすべてが「真ん中」の垂直-alignプロパティを有していなければならないことであると多くの人が理解していない何

.myinput, .myspan { 
    vertical-align: middle; 
}

- 一つのことだけではなく（スパンのように）。

インラインコンテンツを介して目に見えない水平線が走っているとします。通常、テキストのベースラインと画像の下部がこのラインで並べられています。ただし、縦線を中央に変更すると、要素の中央（テキストスパン、イメージなど）がこの線に揃えられます。しかし、彼らはまだ彼らの底やベースラインをそのラインに整列させているならば、それは他のアイテムと垂直に並んでいないでしょう - 彼らはそのラインにもミドルを合わせる必要があります。

出典

2010-11-18 02:59:49 thomasrutter

うわー！今私はちょうど高さに一致するようになりました、みんなありがとう！ :) – Sparkles

ありがとうございました "その行のすべては、 '中間'の垂直方向のプロパティを持っている必要があります.. ..！ –

高さは、この方法によってブラウザによって異なる場合があります。 – SuperDuck

てみパディング：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
    <style type="text/css"> 
     .lbl { 
      background-color:lime; 
      padding:0; 
     } 
     .t { 
      height:17px; 
      padding:0; 
     } 
    </style> 
</head> 
<body> 
    <span class="lbl">My label : </span> 
    <input class="t" type="text" name="t"> 
</body>

心 'スパン' してくださいは、インライン要素であり、ブロックレ'display：block' CSSプロパティを使用しない限り、のサイズ定義は適用されません。インライン要素は内容のサイズを取得するので、フォントサイズのようなものがそのスパンの高さを定義します。

また、私は「の」属性ではなく、「スパン」と「ラベル」タグを使用すると思います。これは、より良い構造を行い、ラベルをクリックすることで入力にフォーカスを移動するという利点を有しています。

次のブロック・レベルの例であり、すべてのブラウザのためのピクセルアライメントによってピクセルを可能にする：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <style type="text/css"> .lbl { background-color: lime; border: 1px solid silver; display: block; float: left; font-size: 12px; height: 16px; padding: 2px; width: 100px; } .t { border: 1px solid silver; display: block; float: left; font-size: 12px; height: 16px; margin-left: 4px; padding: 2px; width: 150px; } </style> </head> <body> <label class="lbl">My label : </label> <input class="t" type="text" name="t"> </body>

出典

2010-11-18 02:15:20 SuperDuck

howdy、入力前にすでにタグを使用していますが、フォームにエラーが返された場合に表示される非表示のスパンです。私はパディングを試しました、それはそれが同じサイズになりますが、今は入力ボックスより少し高く座っています。 – Sparkles

これは、入力ボックスの境界線が原因です。表示される背景や境界線があり、ピクセル単位でピクセルを整列しようとすると、ブロックレベルを使用することができます。これは、ブラウザとシステムによってフォントの高さが多少異なる場合があるためです。答えにブロックレベルの例を追加します。 – SuperDuck

がここSuperDucksコードの少しレタッチバージョンです：あなたが入力フィールドにラベルを付けるためにしようとしている場合は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
<style type="text/css"> 
    .lbl { 
     background-color:lime; 
     padding:0; 
    line-height: 24px; 
    height: 24px; 
    display: inline-block; 
    } 
    .t { 
     height:17px; 
     padding:0; 
     height: 20px; 
     display: inline-block; 
    } 
</style> 
</head> 
<body> 
    <span class="lbl">My label : </span> 
    <input class="t" type="text" name="t"> 
</body>

出典

2010-11-18 03:12:59

インラインブロックはIEプラットフォームでは使用できません。それ以外の場合はインラインブロックのファンです） – SuperDuck

あなたは正しいですが、IE8からサポートされているので、いつかすぐに、私たちは気にせずに使用できます –

、IE 6/7サポートインラインブロックインライン要素では、これに応じて、うまくいくでしょうか？ http://www.quirksmode.org/css/display.html –

<span>と同じ高さにする方法の<input type =「text」>を

答えて

関連する問題