如何删除<input />元素周围的换行符？

Question

我有以下HTML ...

<label for="addnewlocationpostcode">Postcode: </label>
<input type="text" id="addnewlocationpostcode" placeholder="Enter postcode" />
<button id="addnewlocationpostcodecheck" type="button" class="btn btn-primary inline"><span class="glyphicon glyphicon-search"></span></button>

当在浏览器中显示时，所有三个元素都在不同的行上。我希望他们都在一条线上。

使用Chrome的检查器，我可以看到input元素的边距似乎是全宽，即使Chrome声称边距为零......

我（未受过教育）的猜测是，如果边距是全宽，则元素必须是它自己的行。

但是，如果我在控制台中输入$("#addnewlocationpostcode").css("margin")，它会输出"0px"，听起来像jQuery认为边距为零。

我没有在任何这些元素上设置任何CSS。页面上使用的唯一CSS是我从其站点下载的标准Bootstrap .css文件。即使我有一些自定义CSS设置，我仍然不明白当我选择元素时Chrome会将边距显示为容器的整个宽度，但jQuery会将其报告为零。

我尝试使用$("#addnewlocationpostcode").css("margin-right", "10px")等手动设置边距，但它与我使用的值没有任何区别，它看起来总是一样。

任何人都能解释发生了什么事吗？更重要的是，如何修复它以便所有三个元素都在一行上？

Answer 1

如上所述j08691，您似乎正在使用bootstrap，然后尝试将form-inline类放到<form>元素中。

<form class="form-inline">
  <input type="text" id="addnewlocationpostcode" class="form-control" placeholder="Enter postcode" />
  <button id="addnewlocationpostcodecheck" type="button" class="btn btn-primary inline"><span class="glyphicon glyphicon-search"></span></button>
</form>

这是一个jsfiddle：https://jsfiddle.net/e0c0mfnp/

每个细节都在这里：http://getbootstrap.com/css/#forms

我希望它对你有帮助;）

Answer 2

原来是jQuery Steps引起的，我在页面上使用了IAuthorized。它不是插件的CSS，而是Javacript中的东西，就像我评论出来的那样，元素显示正确。

这对我没什么帮助，因为我无法控制插件发出的CSS。看起来我可能需要重新考虑使用该插件或我显示这些元素的方式。