기초 간격 문제

Question

저는 파운데이션 5를 사용하고 일부 작은 컨트롤을 한 줄에 모으고 몇 가지 문제가 있습니다. 양식을 가운데에 맞추기 위해 주 격자에서 오프셋을 사용하고 있습니다. 그것은 동일하게 유지해야합니다. 진정한 질문은 6 개의 컨트롤을 동일한 줄 (3 개의 레이블, 3 개의 텍스트 상자)에서 함께보기 좋게하려면 어떻게해야합니까? 나는 서빙과 Prep and 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"클래스를 제거하고 약간의 공간을줍니다.