Question

I’ve placed several text inputs on the page styled with:

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

Now I need to add one checkbox to the same page. But somehow it is centered. How can I make it left aligned?

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

the checkbox isen’t centerd it has just a width of 200px because you set the width of all input elements to 200px.

so thats why you should specify your input which you wana be 200px width: input[type="text"]

Example: http://jsfiddle.net/sY9Fa/1/