How do you align bullets and buttons to the left?

How do you align bullets and buttons to the left on a form?

You have multiple ways of doing this. I don’t know exactly what you’re looking for since I can’t see your code. Here’s some ways of doing it
Use the float property:

float: left;

If you want to move your buttons relative to a container, like a form, you first need to set the position to relative and the just move it around with margin, like this:

position: relative;
margin-left: 20px;

I tried variations of what you suggested but nothing I tried works.

Send me your code so I can help you better

1 Like

Yes you need share part of code on jsfiddle.net example.

Here are the buttons and checkboxes I want to align left

<label>
  <input name="user-recommend"
         value="Everyday"
         type="radio"
         class="input-radio" checked/>Everyday</label>
<label>
  <input name="user-recommend"
         value="sometimes"
         type="radio"
         class="input-radio"/>Sometimes</label>
<label>
  <input name="user-recommend"
         value="I-never-use-the-library"
                type="radio"
         class="input-radio"/>I never visit the library</label>

What is your favourite book genre?

(Check your favourite Genre) Fantasy Sci-Fi <input name="prefer" value="mystery" type="checkbox" class="input-checkbox"

They’re already aligned to the left. Are you sure you don’t want to align them beneath eachother?
In that case just write <br> between each input, like this:

<label>
  <input name="user-recommend"
         value="Everyday"
         type="radio"
         class="input-radio" checked/>Everyday</label>
<label>
<br>
  <input name="user-recommend"
         value="sometimes"
         type="radio"
         class="input-radio"/>Sometimes</label>
<label>
<br>
  <input name="user-recommend"
         value="I-never-use-the-library"
                type="radio"
         class="input-radio"/>I never visit the library</label>

Yes that does the trick. Thank you so much.

1 Like