0

こんにちは、フォームの幅を 100% にしたいと思います。テキスト ボックスをページのほぼ全幅に拡張し、テキスト ボックスのすぐ右側に小さな「GO」ボタンをすべて同じ行 (またはブロック) に配置したいと考えています。

現在、私のテキスト ボックスは、その中のテキストの幅についてのみです (「ここにアドレスを入力してください」) ありがとうございます!

CSS

#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:100%;
}

HTML

<div id="search1">
  <form style="margin: 0px; padding: 0px;" name="search_form" action="view" method="get"    onsubmit="codeAddress(); return false">
    <input id="address" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
    <input type="button" value="GO" onclick="codeAddress()"/>
  </form>
</div>
4

3 に答える 3

1

デフォルトでは、フォームを変更しない場合は 100% です。入力フィールドを長くしたい場合は、 size 属性を使用できます。

<input id="address" size="90" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>

フィドル

または、これを追加して CSS を介して実現できます。

#address{
         width:80%;
}
于 2013-01-16T16:03:44.663 に答える
0

css：

#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:100%;
}

#search1 button {width:10%;}
#search1 input#address {width:85%;margin-left:5%;}

HTML

<div id="search1">
  <form style="margin: 0px; padding: 0px;" name="search_form" action="view" method="get"    onsubmit="codeAddress(); return false">
    <input id="address" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
    <button type="button" onclick="codeAddress()"> GO </button>
  </form>
</div>
于 2013-01-16T16:08:58.193 に答える
-1

少しのJqueryでこれを行うこともできます

CSS：

#search1{
    height: 25px;
    padding:5px;
    padding-left:11px;
    display:inline-block;
    background-color:#62564A;
    width:99%;
}
input {
    display: inline-block;
}

Jquery：

$(document).ready(function () {

var $ww = $(window).width();
var $input = $('input#address');

$input.width($ww - 90);

$(window).resize(function() {
    $input.width($(window).width() - 90);
});

});

HTMLを同じに保ちました。

<head>タグにJqueryライブラリを含める<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

- 90フォームを配置する場所に応じて、をより低い値またはより高い値にtweekする必要がある場合があります。

これが実際の例へのリンクです。

于 2013-01-16T16:18:22.240 に答える