MiaSan MiaSan - 4 months ago 17
CSS Question

html text input and checkboxes. css Issue

edit: Looks like this now: https://jsfiddle.net/vmd7m3yh/5/
It's better, definitely, but I need to sort out how to list the inputs correctly.. Kinda messy right now.

I am running into a problem in html/css.
I am trying to make something like this:
enter image description here

The problem is that I dont know how I can align them this way.
I have tried to use float on the the input and checkbox, however the checkbox get pushed back to the first label.

current situation:

https://jsfiddle.net/vmd7m3yh/

The CSS for the specific div is at the bottom of the file.

Any idea what I should change? I am quite ashamed of asking a question on SO about html. please, be nice :)



/*Custom form*/

.workorder-form {
margin-bottom: 5px;
}

.workorder-form form {
margin-top: 15px;
width: 500px;
}

.workorder-form label {
margin-top: 5px;
}

.workorder-form input[type=text] {
float: right;
margin-top: 5px;
}

.workorder-form input[type=checkbox] {
background-color: yellow;
}

.workorder-form textarea {
width: 350px;
height: 200px;
padding-bottom: 5px;
}

<div class="workorder-form">
<form class="workorder-form">
<h4>@Resources.WorkReport</h4>
<label>some label</label>
<input type="text" name="orderNumber" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

<label>some label</label>
<input type="text" name="phone" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

<label>some label</label>
<input type="text" name="email" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

<label>some label</label>
<input type="text" name="email" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

<label>some label</label>
<input type="text" name="email" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

<label>some label</label>
<input type="text" name="email" value="" />
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br />

<label>some label</label>
<textarea name="email" value=""></textarea><br />

</form>
</div>





edit: Looks like this now: https://jsfiddle.net/vmd7m3yh/5/
It's better, definitely, but I need to sort out how to list the inputs correctly.. Kinda messy right now.

Answer Source

I solved it doing something completely different. I made 1 div and inside that div I inserted 2 new divs. so I had the checkbox and span in another label then the form. Problem solved:)