Bijan Bijan - 1 year ago 63
CSS Question

CSS Change Spacing Between Inputs

I am using some code from to create some elegant looking forms. I am also using this code to have a simple rating system for my form.

However, when I combine the two together, the spacing on the rating looks very spaced out because of the CSS from

How can I fix the spacing?

Here is the code:

<link rel="stylesheet" href="">
<form action="" method="post" class="pure-form pure-form-aligned">
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">

<div class="pure-control-group">
<label for="foo">Rating</label>
<div class="acidjs-rating-stars">
<input type="radio" name="group-1" id="group-1-0" value="5" /><label for="group-1-0"></label><!--
--><input type="radio" name="group-1" id="group-1-1" value="4" /><label for="group-1-1"></label><!--
--><input type="radio" name="group-1" id="group-1-2" value="3" /><label for="group-1-2"></label><!--
--><input type="radio" name="group-1" id="group-1-3" value="2" /><label for="group-1-3"></label><!--
--><input type="radio" name="group-1" id="group-1-4" value="1" /><label for="group-1-4"></label>

<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
<input name="SubmitButton" type="submit" class="pure-button pure-button-primary">Submit</button>



Here is what the page looks like for me:

enter image description here

Answer Source

I saw the other answers included suggestions for !important statements, so I decided to post mine. I threw the code you provided into a and made a few quick changes to see if this is what you were looking for.

I added the class "raters" to your markup and styled it with that.

<div class="pure-control-group raters">
  <label for="foo">Rating</label>
  <div class="acidjs-rating-stars">

You can see why I've added these style rules in the comments supplied with them:

.raters label{
  float:left;       /* Corrective float for your modified code              */
.raters input{
  margin:0 0.25em; /* Spaces out the 'floated' radio inputs for presentation*/
.raters .acidjs-rating-stars label{ width:auto; } /* Actual Width Correction */

You can see it working live here:

(Note: I added the yahoo's external stylesheet to the CSS panel settings. You can access them with the gear in the top right-hand corner.)*