Question

您好，我希望表单宽度为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>

Answer 1

默认情况下，如果您不更改表单，则表单为100％。如果您希望输入字段更长，则可以使用size属性。

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

FIDDLE

或者你可以通过添加这个来实现它：

#address{
         width:80%;
}

Answer 2

的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>

Answer 3

您也可以使用一些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调整到更低或更高的值，具体取决于您放置表单的位置。

以下是working example的链接。

完整的div宽度文本框和按钮

3 个答案: