1

私は自分のウェブサイトの上部に配置した画像にこの html を持っています (私はローカルファイルで作業しています。ウェブサイトはまだライブではなく、最初にいじっているだけです):

HTML:

<img id="top-header" src="images/top_header.jpg">

CSS:

#top-header {
   position: absolute;
   left: 0%;
   top: 0;
}

画像は3000X200のjpg画像です

その画像のすぐ上、画像の右端に配置したいフォームがあります。

(フォーム) HTML:

<form id="searchbox" action="" method="get">
<input >

ここに画像の説明を入力

どうすればこれを行うことができますか？

4

3 に答える 3

1

フォームをロードしたい場所に左に変更するだけで、フォームで同じことができます。

デモ: http://jsfiddle.net/lucuma/vV2ce/

CSS:

#top-header {
  position: absolute;
  left: 0%;
  top: 0;
}

#searchbox {
    position:absolute; 
    left: 1200px;
    display:inline-block;
    z-index:10
}

/* in my example #searchbox and form are the same so this depends on your overall '
   implementation 

   form {position:absolute; left: 1200px;display:inline-block;z-index:10}
*/

HTML:

<img id="top-header" src="http://placehold.it/1440x200">

<form id="searchbox" action="" method="get">
   Input <input type="text" />
</form>
于 2013-04-15T19:43:41.863 に答える
0

img タグを使用する代わりに、画像をフォームの背景として設定することをお勧めします。

form {
   background: url('imagepath.png') no-repeat 0 0;
   text-align: right;
}
于 2013-04-15T19:49:55.963 に答える