css - 如何更正复选框位置，当它与 jQuery UI 输入文本在同一页面时？

Question

我在页面上放置了几个文本输入，样式为:

ui-autocomplete-input ui-widget-content ui-corner-all

现在我需要在同一页面上添加一个复选框。但不知何故它是居中的。我怎样才能让它左对齐？

HTML:

<div class="ui-widget"><label for="link">Link: </label><input type="text" id="link" name="link" placeholder="" class="ui-autocomplete-input ui-widget-content ui-corner-all"></div>
<div class="ui-widget"><input type="checkbox" id="cb-anonymous">Anonymous</div>

CSS:

label {
  width: 150px;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
}
input {
  width: 200px;
  display: inline-block;
}

Demo

Answer 1

复选框没有居中，它只有 200 像素的宽度，因为您将所有输入元素的宽度设置为 200 像素。

这就是为什么您应该指定宽度为 200 像素的输入:input[type="text"]

示例:http://jsfiddle.net/sY9Fa/1/