[英]Put input submit on same line as input box
这可能很简单,但我不知道该怎么做。 目前使用此代码,“查找”按钮位于输入“位置”框下方的行上。 如何让它像大多数搜索框一样工作在右边的同一行?
HTML
<div class="fieldwrapper">
<input id="field_location" class="field r2" placeholder="Town, City or Postcode" id="Postcode" name="Postcode" type="text" value=""><input type="submit" id="findbutton" value="Find" />
</div>
CSS
field { font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
如果你想让你的文本框100% width
,除了它之外的按钮,你可以这样做: 我的小提琴
<input type="submit"value="Find" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" style="width: 100%;" />
</div>
这是因为您的输入字段设置为100%宽,旁边的按钮没有空间。
这是一个固定版本: http : //jsfiddle.net/ThfES/1/
您只需知道按钮的宽度即可工作。 然后你基本上给输入一个完整的宽度和位置绝对按钮在右边。 填充是没有文本位于按钮后面:
<form method="post" action="">
<input type="text" name="search-str" id="search-str" value=""/>
<button type="submit">Submit</button>
</form>
至于CSS:
form {
position: relative;
}
input {
width: 100%;
padding-right: 40px;
}
button {
width: 40px;
position: absolute;
top: 0;
right: 0;
}
您需要float
块元素,以便它们并排出现,可以这么说。 像<a>
和<span>
这样的inline
元素默认执行此操作。 了解有关CSS Box模型的更多信息。
您的解决方案: http : //jsfiddle.net/HBJtT/
编辑:保持input
字段为100%
宽。
潜在的解决方案: http : //jsfiddle.net/3TZL8/
我不支持这个解决方案,如果你保持输入文本字段100%
宽的动机是让按钮和字段看起来“无缝地结合在一起”,你应该使用网格或UI框架。 我喜欢Foundation框架,可以在这里找到一个可能的解决方案: http : //foundation.zurb.com/docs/forms.php (向下滚动到“使用后缀操作输入”示例)
试试以下,宽度:50%
input.field{width:50%}
你可以这样做(在我的情况下工作):
<div style="width:150px"><p>Start: <input type="text" id="your_id"></p>
</div>
<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>
这是一个演示: http : //jsfiddle.net/gn3qx6w6/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.