3

テキストエリアと送信ボタンのあるフォームがあります。
テキストエリアを左に、送信ボタンを右に浮かせました。

Firefox で表示するとこのようになります。

ここに画像の説明を入力 IEで表示するとこんな感じ。

ここに画像の説明を入力

これは私が書いたhtmlコードです。

<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; float: left;"></textarea>
   <input type="submit" style="width: 100px; float: right;" />
  </form>
</div>

これはCSSコードです:

#form {
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
}

送信ボタンをテキストエリアに対して中央に垂直に揃える方法。

回答 :
要件を満たすようにコードを修正しました。

これはCSSコードです:

#form {
  overflow: auto;
  border: 1px solid black;
  width: 600px;
  padding-left: 10px;
 padding-right: 10px;
  }
 #form  textarea {
   vertical-align: middle;
  }
 #form span{
   display: inline-block;
   vertical-align: middle;
  margin-left: 40px;
}

HTML コード:

 <div id="form">
    <form method="post" action="google.php">
    <textarea rows="3" cols="40"  style="width: 300px; "></textarea>
    <span><input type="submit" value="Comment"  /></span> </form>
 </div>
4

6 に答える 6

1

あなたは与えるmargin-leftかmargin-right財産にすることができます。

元：

margin-left:135px;

于 2016-02-12T05:59:14.390 に答える
1

display:tableとdisplay:table-cell、プロパティを利用できます。ただし、この場合floats、特定の幅を削除して指定する必要があります。

HTML

<div id="form">
  <form method="post" action="google.php">
      <div class='wrap'>
   <textarea rows="3" cols="40"></textarea>
      </div>
       <div class='wrap_2'>
<input type="submit"/>
      </div>
  </form>
</div>

CSS

#form{
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
 display:table;
}

div.wrap, 
div.wrap_2 {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

div.wrap {
    width:500px 
}

フィドル:

http://jsfiddle.net/7gnMu/

于 2013-08-05T04:41:39.090 に答える
0

この場合、vertical-align: bottom は機能しません。代わりに、height と line-height を使用すると、ボタンが垂直方向の中央に揃えられます。

入力用に次のスタイルが含まれています。

height: 80px; 
line-height: 70px

ここで動作するデモを見てください:デモ

于 2013-08-05T04:40:56.133 に答える
0

Jsフィドルを試す

http://jsfiddle.net/wZs2F/

#form {
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
}
.txtinput
{
 margin-left:100px;
}


<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; "></textarea>
      <div class="txtinput">
   <input type="submit" style="width: 100px;"  />
          </div>
  </form>
</div>
于 2013-08-05T04:32:29.407 に答える