19

这可能很简单，但我不知道该怎么做。目前使用此代码，“查找”按钮位于输入“位置”框下方的行中。我如何让它像大多数搜索框一样位于右侧的同一行？

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

链接 http://jsfiddle.net/VL3Dj/

4

7 回答 7

54

如果你想要你的文本框100% width和一个按钮，你可以这样做：我的小提琴

<input type="submit"value="Find" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
   <input type="text" style="width: 100%;" />
</div>​
于 2012-10-12T12:25:37.023 回答
8

......演示

嗨，现在添加这个 CSS

.fieldwrapper{
white-space: nowrap;
}

现场演示

于 2012-10-12T12:26:43.993 回答
3

您只需要知道按钮的宽度即可。然后你基本上给输入一个完整的宽度和绝对位置的按钮到右边。填充是所以按钮后面没有文本：

    <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;
}
于 2014-11-19T11:37:18.640 回答
1

这是因为您的输入字段设置为 100% 宽，旁边的按钮没有空间。

这是一个固定版本：http: //jsfiddle.net/ThfES/1/

于 2012-10-12T12:25:10.190 回答
0

您需要float阻止元素，以便它们并排显示，可以这么说。inline元素喜欢<a>并<span>默认执行此操作。了解有关 CSS 框模型的更多信息。

您的解决方案：http: //jsfiddle.net/HBJtT/

编辑：保持input领域一样100%宽。

潜在的解决方案：http: //jsfiddle.net/3TZL8/

虽然我不支持这种解决方案，但如果您保持输入文本字段100%宽的动机是使按钮和字段看起来“无缝在一起”，您应该使用网格或 UI 框架。我喜欢 Foundation 框架，可以在这里看到一个可能的解决方案：http: //foundation.zurb.com/docs/forms.php（向下滚动到“使用后缀操作输入”示例）

于 2012-10-12T12:27:11.043 回答
0

尝试跟随，宽度：50%

input.field{width:50%}​
于 2012-10-12T12:28:18.377 回答
0

你可以做这样的事情（在我的情况下工作）：

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

于 2014-09-30T08:24:52.950 回答