html - 全 div 宽度的文本框和按钮

Question

您好，我希望表单宽度为 100%。我希望文本框几乎延伸整个页面的宽度，并在文本框的右侧直接放置小的“GO”按钮，所有按钮都在同一行(或 block )上。

现在我的文本框只有其中文本的宽度(“在此处输入地址”)谢谢!

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

或者您可以通过添加以下代码通过 CSS 实现它:

#address{
         width:80%;
}