Question

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

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/

Answer 1

如果您希望文本框为100% width，并且除了它之外的按钮，您可以这样做：My Fiddle

<input type="submit"value="Find" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
   <input type="text" style="width: 100%;" />
</div>

Answer 2

............的 Demo

您好现在添加此css

.fieldwrapper{ white-space: nowrap; }

Live demo

Answer 3

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

以下是固定版本：http://jsfiddle.net/ThfES/1/

Answer 4

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

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

Answer 5

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

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

编辑：将input字段保持为100%宽。

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

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

Answer 6

请尝试以下，宽度：50％

input.field{width:50%}

Answer 7

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

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

将输入提交放在与输入框相同的行上

7 个答案: