html - CSS 更改输入之间的间距

Question

我正在使用来自 purecss.io 的一些代码创建一些外观优雅的表格。我也在使用 this code为我的表单设置一个简单的评分系统。

但是，当我将两者结合在一起时，由于来自 purecss.io 的 CSS，评级上的间距看起来非常间隔

如何固定间距？

代码如下:

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

我的页面是这样的:

Answer 1

我看到其他答案包括对 !important 语句的建议，所以我决定发布我的答案。我将您提供的代码放入 codepen.io 并进行了一些快速更改，看看这是否是您要找的。

我将类“评分者”添加到您的标记中并使用它设置了样式。

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

您可以在随附的注释中看到我添加这些样式规则的原因:

.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 */

您可以在此处实时查看它的运行情况:http://codepen.io/anon/pen/vKNGpv

(注意:我在 CSS 面板设置中添加了雅虎的外部样式表。您可以通过右上角的齿轮访问它们。)*