0

html5 と css3 を使用して最初のサイトを作成しています。テキストボックスに検索ガラスの画像を表示するには、このヘルプを見つけました。次のようにうまく機能します。 ここに画像の説明を入力

コードは次のとおりです。

HTML

<form id="header-search">
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />

CSS

#header-search{overflow:auto;}

#header-search input.searchbox {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:4px;
     padding-right:28px;
     color:#4a4a4a;
     float:left;
 }

#header-search input.button{
    border:0;
    padding:0;
    margin:0 0 0 -24px;
    width:24px;
    height:24px;
    background:transparent url('your-search-icon-path-here') center center  no-repeat;
    float:left;
}

テキスト ボックスの右側に検索画像を表示する必要がある CSS を理解しようとしましたが、取得できませんでした。

テキストボックス内のグループ化画像とは何か教えてください。CSSコードに表示のあるプロパティがなかったので、その表示と配置はどのように制御されていますか?

テキストボックスの左側から表示を変更するにはどうすればよいですか?

ありがとう

4

1 に答える 1

1

与えられた例では、パディング make は検索ボックスの実際の幅を計算するのを混乱させます (あまり混乱することはありませんが、少しはそうです)。

まず最初に、あなたのものを変更して作成したこの例を見てください。

ここで実際に起こっていることは、入力ボックスの横にボタンが配置されていることです。ただし、-24 (画像の幅) のマージンを与えることで、強制的に左側に移動させています。したがって、左余白の 24px を減らすと、テキスト ボックスのようになります。画像を左に揃えたい場合は、左余白をテキスト ボックスの幅に縮小して、左のように見せることができます。

margin:0 0 0 -200px;

ここで 200px はテキストボックスの幅です。

左画像の例

于 2012-08-18T12:49:24.570 に答える