CSSを使用してフォーム送信ボタンの幅をアンカーの幅と同じにする問題

私は基本的なメニューをいくつかのdivとアンカーで構築しています。しかし、アンカーの代わりにアンカーの代わりにフォーム<input type="submit">を使用する必要があります（モバイルのテンプレートなので、ここではjavascriptを使用できません。フォームデータを送信する送信ボタンを使用する必要があります）。CSSを使用してフォーム送信ボタンの幅をアンカーの幅と同じにする問題

私が何時間も苦労してきた問題は、入力がアンカーと正確に同じ幅になるようにすることです。両方とも幅：50％に設定されています。入力はアンカーより少し短くなっています。最小限でも、それはまだ明らかです。なぜこれが起こっているのか分かりません。誰でもこれを手伝うことができますか？私の単純化されたコードは以下の通りです。問題は、デスクトップChromeとFirefox、そして私がテストした様々な携帯電話で再現可能です。

<html> 
<head> 
    <style> 
     a.btn_bigfake{ 
      display:block; 
      width:50%; 
      margin: 0px auto 5px auto; 

      background:#f5f5f5; 
      border:4px solid #282726; 
      text-align: center; 
     } 

     input.btn_bigfake{ 
      width:50%; 
      display:block; 
      margin: 0px auto 5px auto; 

      background:#f5f5f5; 
      border:4px solid #282726; 
      text-align: center; 
      padding:0; 
     } 
     div{width:100%;} 
    </style> 
</head> 
<body style="width:100%; margin:0; padding:0;"> 
    <div><a href="#" class="btn_bigfake">1. anchor</a></div> 
    <div><a href="#" class="btn_bigfake">2. anchor</a></div> 
    <div><input type="submit" class="btn_bigfake" value="3. input"/></div> 
</body> 
</html>

出典

2011-06-01 BoomShaka

奇妙な; Chromeのデベロッパーツールによれば、ブラウザは*同じ幅だと考えています！ – Pointy

これは国境と関係があります。アンカーは、境界の幅を拡大しますが、入力には幅の境界が含まれます。 http://jsfiddle.net/fW7FN/ –

まず、同じものを表示するすべての要素間で同じCSSクラスを共有する必要があります。 CSSが少なく、メンテナンスも少なくて済むということです。

あなたの問題を解決するには、クラス名をINPUTを囲むDIVに配置し、入力にカスタムスタイルを適用してDIVを塗りつぶす必要があります。 DIVの背景+パディングを使用して境界線をエミュレートできます。

ここをクリックしてください。

出典

2011-06-01 16:23:36 darsh

境界線が存在する場合の計算方法は、width;50%;と同じです。私はいつもそれを他のものに合わせるために<input>に幅のピクセルをいくつか追加しなければならなかった。または、含まれるdivをwidth:50;に設定し、アンカーと入力の両方をwidth: 100%'に設定することもできます。

出典

2011-06-01 16:05:23 KatieK

このjsfiddleを修正して、あなたが意味するものを表示できますか？あなたの提案は理にかなっていますが、私はそれを働かせることができませんでした。 http://jsfiddle.net/jMTT3/1/ – mrtsherman

面白い - 私はこれがFirebugで動作していると思ったが、今はjsfiddleで複製できない。 jsfiddleのjenのコメントは、ピクセル単位で幅を設定していることを示しています。これはいつもやっていたことです。 – KatieK

"には、他のサイズに合わせるために、常に数ピクセルの幅を追加する必要がありました。入力とボタンには 'box-sizing：border-box'があり、divやaのような他の要素は要素のパディングやボーダーを考慮しないデフォルトのボックスサイズを持っているからです。同じ幅でなければならないすべての要素に 'box-sizing：border-box'を設定すると問題が解決します。 –

CSSを使用してフォーム送信ボタンの幅をアンカーの幅と同じにする問題

答えて

関連する問題