3

私は CSS の専門家ではありません。<input type="button">をの中心に配置しようとしていますが、<img>うまくいきません。ここにフィドルがあり、ここに私のHTMLがあります:

<div id="avatar">
    <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
    <input id="btnAvatar" class="button" type="button" name="Button" value="Change">
    <p>Text</p>
</div>

入力を画像の上に表示したいのですが、テキストは右側にある必要があります。私は使用してみました：

img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}

ただし、クロム/サファリでのみ機能し、他のブラウザーでは、ボタンは画像の前ではなく画像の後に配置されます。

これを行う最善の方法は何ですか？

Obs .: ボタンがあるスペースは空にする必要があります。そうしないと、テキストが上に移動します。

これはクロムで表示される方法です：

ここに画像の説明を入力

これは、Firefox での表示方法です。

ここに画像の説明を入力

4

5 に答える 5

4

絶対位置で x と y の位置を指定する必要があります。入力用の css を次のように変更します。

input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}
于 2012-12-14T14:33:59.043 に答える
4

このコードを実行するためのシンプルでクリーンな方法があります。秘訣は、DIV タグを使用してすべてを格納し、所定の位置に配置することです。

  1. メイン DIV を使用してすべてを含め、position:relative プロパティを指定します。
  2. img タグと input タグを 1 つの DIV に配置し、この DIV に float:left プロパティを割り当てます。
  3. CSS を使用して P タグを選択し、左にフロートします。これにより、img と入力を含む DIV の横にテキストが配置されます。
  4. ここで、プロパティ TOP & LEFT を使用して配置する際に、input タグに position:absolute プロパティを割り当てます。

次に例を示します。

<div id="avatar-container">
     <div id="avatar-image-btn">
          <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar"  />
          <input id="btnAvatar" class="button" type="button" name="Button" value="Change">
     </div>
     <p>Text</p>
</div>

<style> 
    #avatar-container { position: relative; }
    #avatar-container p { float: left; }
    #avatar-image-btn { float: left; }
    #avatar-image-btn img { }
    #avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>

見やすく、シンプルで、いつでも機能し、マルチブラウザーと互換性があります。

※marginプロパティは、気をつけて使うとぐちゃぐちゃになる可能性があります。ベスト プラクティスは、div 内のタグをスタックするために使用し、ギャップ マージンが大きい配置には使用しないことです。

于 2012-12-14T16:08:54.573 に答える
2

Z インデックスを使用する

input { position: absolute; margin:140px 0px 0px 130px; z-index:2}

これはあなたのボタンを1層上に押し上げています

質問を正しく理解した後、ここに解決策があります

img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}

コメントで述べたように、問題はポジショニングにありました

于 2012-12-14T14:29:29.007 に答える
1

#avatarを追加position:relativeして、＃btnAvatarを与えることができますtop:0; left:0;

于 2012-12-14T14:32:49.027 に答える
1

これでうまくいくはずです：http://jsfiddle.net/a6tA7/9/

ではなく、入力要素を使用top:して配置することをお勧めしますleft:margin:

于 2012-12-14T14:46:55.497 に答える