基础间距问题

Question

我正在使用基础5并尝试将一些较小的控件放在一行并出现一些问题。我在主网格中使用偏移来使表单居中。这需要保持不变。真正的问题是如何让6个控件在同一行上看起来像样（3个标签，3个文本框）？我会很高兴有一点额外的间距分开Servings和Prep和Cook时间控件。

代码：

 <div class="row">
    <div class="small-3 large-1 large-offset-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Servings:</span></div>
    <div class="small-2 large-1 columns left"><input type="text" id="servings" name="servings" value="<? echo $servings ?>" /></div>

    <div class="small-7 large-3 columns">
       <div class="row">
         <div class="small-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Prep (min):</span></div>
         <div class="small-2 columns"><input type="text" id="prep_min" name="prep_min" value="<? echo $prep_min ?>" /></div>
         <div class="small-3 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Cook (min):</span></div>
         <div class="small-2 columns"><input type="text" id="cook_min" name="cook_min" value="<? echo $cook_min ?>" /></div>
       </div>
    </div>

    <div class="large-4 columns">&nbsp;</div>
 </div>

我附上了它在页面上的外观截图。正如你所看到的那样重叠。

Answer 1

删除“right”类并给它们一些空间。