Bijan Bijan - 5 months ago 15
CSS Question

CSS Change Spacing Between Inputs

I am using some code from purecss.io 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 purecss.io

How can I fix the spacing?

Here is the code:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<form action="" method="post" class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>

<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>
</div>

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

</div>
</fieldset>

</form>


Here is what the page looks like for me:

enter image description here

Answer

I saw the other answers included suggestions for !important statements, so I decided to post mine. I threw the code you provided into a codepen.io 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: http://codepen.io/anon/pen/vKNGpv

(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.)*

Comments