Vertical Alignment Of Checkboxes Using CSS

Question

Working on converting some of the forms on our website to be housed within our new emailing platform (Pardot, a part of Salesforce). Using their CSS editor to create the forms, but I don't have much experience in CSS. I got all the labels for a checkbox to align vertically, but they're in a diagonal line instead of a vertical line. Any tips on how to fix that?

I also attached an image of what the form looks like on the website.

Here's the CSS:

pardot-form input[type="checkbox"] {
  background-color: #fff;
  color: #666;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.75em;
  height:18px;
  width:18px;
  padding:0;
  margin-top:5px;
  display:block;
  float:left;
}

Please provide your HTML code as well as part of a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). I suspect your labels are all within each other instead of next to each other. — chriskirknielsen, Mar 23 '18 at 18:53
Possible duplicate of [How to align checkboxes and their labels consistently cross-browsers](https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) — Rob, Apr 18 '18 at 12:40

score 0 · Answer 1 · answered Apr 18 '18 at 12:35

Will this work for you? I pulled some basic form elements from an existing Pardot form.

form.form input[type="checkbox"] {
    background-color: #fff;
    color: #666;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    line-height: 1.75em;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-top: 5px;
    display: inline;
}

    <form class="form">
     <p class="form-field company col-sm-12 Main_Alarm_Equipment_Used pd-checkbox required required-custom    ">
      <label class="field-label" for="1">Which mailing lists would you like to sign up for? (Check all that apply)*</label>
      <span class="value"> <span>
      <input type="checkbox" name="2" id="2" value="598212" onchange="">
      <label class="inline" for="2">General Information</label>
      </span> <span>
      <input type="checkbox" name="3" id="3" value="598214" onchange="">
      <label class="inline" for="3">Membership</label>
      </span> <span>
      <input type="checkbox" name="4" id="4" value="598216" onchange="">
      <label class="inline" for="4">Alumni</label>
      </span> <span>
      <input type="checkbox" name="5" id="5" value="598218" onchange="">
      <label class="inline" for="5">Show</label>
      </span> <span>
      <input type="checkbox" name="6" id="6" value="598220" onchange="">
      <label class="inline" for="6">Band</label>
      </span> </span> </p>
    </form>

What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! https://stackoverflow.com/help/how-to-answer — Rob, Apr 18 '18 at 12:41
Changed the display:block to display:inline and removed the float:left. I thought showing rather than explaining was best since there was no code to work off of in the original post. My bad. — Katy H., Apr 18 '18 at 16:58

Vertical Alignment Of Checkboxes Using CSS

1 Answers1