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;
}

查询：

$(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根据放置表单的位置将其调整为更低或更高的值。

这是工作示例的链接。

于 2013-01-16T16:18:22.240 回答