0

もう一度画像として表示します:) ここに画像の説明を入力

検索ボックスを設計していますが、奇妙なエラーが発生しました..私の目標は、入力ボックスと設定ボタンを 1 つに見えるようにすることです。だから私はそれらをボーダーでスタイリングしました。これらの 2 つの要素の間に隙間がなければ、問題ないように見えます。また、ボタンは入力ボックスよりも 2 ピクセル小さいです。ここに私のcssがあります

form#search
{
}
input[type=text]
{
  width: 400px;
  border-top: 1px solid rgb(217, 217, 217);
  border-right: none;
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: 1px solid rgb(217, 217, 217);
  height: 50px;
}
input[type=button]
{
  font-family: 'WebSymbolsRegular';
  width: 40px;
  border-top: 1px solid rgb(217, 217, 217);
  border-right: 1px solid rgb(217, 217, 217);
  border-bottom: 1px solid rgb(217, 217, 217);
  border-left: none;
  background: white;
  height: 50px;
}
input[type=submit]
{
  font-family: 'WebSymbolsRegular';
  height: 50px;
}

そして、これが sachleen のリクエストによる html です。ここでは特別なことは何もありません..

<form id="search">
    <input type="text" name="search" placeholder="search" tabindex="1"/>
    <input type="button" value="S" tabindex="3"/>
    <input type="submit" value="L" tabindex="2"/>
</form>

それらのギャップを作るために、私はルールを作っていません。margin または padding : 0 を追加しても、何も変わりません。また、Eric Meyer の「Reset CSS」2.0 を使用して CSS をリセットしています。

4

4 に答える 4

3

これは私のために働いた

form {
  border: 1px solid rgb(217, 217, 217);
  width: 598px;
  background: green;
  font-size:0;  

  input {
    padding: 0px;
    border: 0px;
    font-size:18px; 
    height: 30px;
    background: white; 
  }
  input[type='text'] {
    width: 498px;
  }
  input[type='button'], input[type='submit'] {
    width: 50px;
  }
}

究極の解決策を発見！すべてのブラウザで同じように動作します。キー - font-size: 親 ontainer (この場合はフォーム) で 0、パディングを 0px に設定、すべての入力で同じ高さ。フォームの幅を 598 (+2 * 1 px の境界線) に設定し、入力幅を合計 598 に設定できます。

于 2012-11-14T11:01:31.450 に答える
0

テキストとボタンの 2 つの異なる入力タイプを 1 つにマージしようとしています。それらには異なるカスタム プロパティがあるため、レイアウトの問題が確実に発生します。ボタンのマージン値を使用して調整することはできますが、クロスブラウザーとの互換性はありません。

于 2012-11-13T19:13:56.093 に答える
0

いくつかの不正行為を行いました (ボタンに 2px の追加を与えました) が、設定/検索用の画像を除いて、これはむしろ機能します:

http://jsfiddle.net/JLuyL/

キーはdisplayCSS のプロパティにあります。

于 2012-11-13T19:15:30.750 に答える