Checkboxes are not inline

HTML & CSS
1

I am trying to get my checkboxes to set up like the image below, but they on top of eachother.

http://puu.sh/cbYli/530825d9e3.png

I have looked and evrything I have tried isnt working. Any help would be appreciated.

2

We need code to look at. A live site would be preferable. It’s easier to do this if we aren’t in the dark :smile:

3

An example of your code could be something like

<label for="whatever"><input type="checkbox" name="whatever"> Palletizer</label>

Style as desired

4

One of many ways to do this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.checkbox input,.checkbox label{
	display:inline-block;
	vertical-align:middle;	
}
.checkbox label{margin-right:20px;}

</style>
</head>

<body>
<form name="form1" method="post" action="">
		<div class="checkbox">
				<input type="checkbox" name="palletizer" id="p1">
				<label for="p1">Palletizer</label>
				<input type="checkbox" name="palletizer" id="p2">
				<label for="p2">Palletizer2</label>
				<input type="checkbox" name="palletizer" id="p3">
				<label for="p3">Palletizer3</label>
		</div>
</form>
</body>
</html>
5

Sorry guys, I didnt get an email notification that there was a reply.

Right now I am using

HTML

<div class="form-group">
<label class="col-md-3">Interested in</label>
<div class="col-md-7">
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<br>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" >  <span>Palletizer</span></label>
<br>
</div> <!-- /.col -->
</div> <!-- /.form-group -->

CSS

label{display:inline-block;margin-bottom:5px;}
label.cats {font-weight: normal;}

Paul, I tried your code and I am getting only a checkbox in front of the first option.

http://puu.sh/cde3Y/59deae0dc7.png

I used your exact code.

7

Works for me

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
label{display:inline-block;margin-bottom:5px;}
label.cats {font-weight: normal;}
</style>
<title> John_Betong - 002</title>
</head> 
<body>
<div class="form-group">
<label class="col-md-3">Interested in</label>
<div class="col-md-7">
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<br>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" ><span>Palletizer</span></label>
<label class="cats"><input name="q1[]" type="checkbox" value="a6" class="form-control" >  <span>Palletizer</span></label>
<br>
</div> <!-- /.col -->
</div> <!-- /.form-group -->

</body>
</html>

You probably just don’t have enough room. There isn’t enough to replicate. I need a full example.

8

Would you mind if I PM’d you my skype. I must be missing the smallest thing because I have tried making the area bigger and all and I cant get it going.

9

I’m at work. Not possible. Is giving a link not possible? It would take a minute.

10

I knew it was something simple. I went in reverse and took out all the css and I figured out the issue. It was a main div that was putting the < label > in a block instead of inline.

I appreciate everyones help on this.

I will say though, I thought that any css that was on the page overwrote what is in the css file.

11

I also emailed you that fix … :wink:

You might want to look at the other CSS I gave you.

12

Then you did not use my exact code :smile:

Here’s a codepen of my exact code showing it working everywhere.

This is a much neater way of laying out the checkboxes than your slightly convoluted version using a non semantic span for the label. It is also better for accessibility to associate labels with their form controls as in my example.