Question

我有一个简单的2列表单，我想在页面上居中。不确定为什么列之间有3英寸的间隙

<form id="frm" action="profile" method="post" class="custom">
<div class="row">
  <div class="small-4 small-centered columns">
     <div class="row">
        <div class="small-1 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Email:</span></div>
        <div class="small-3 columns"><input type="email" id="profile_email" value="test@test.com" /></div>
     </div>
     <div class="row">
        <div class="small-1 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Username:</span></div>
        <div class="small-3 columns"><input type="text" id="profile_username" value="TestIt" /></div>
     </div>
  </div>
</div>
</form>

Answer 1

是的。但是在基础行中基本上只分为12列，但是在这里你只有两列，默认情况下，基础中的最后一列浮动到右侧。请在这里查看你的萤火虫

     [class*="column"] + [class*="column"]:last-child {
       float: right;
   }

在这种情况下，您可以使用覆盖类，例如

     .left{
           float:left !important;
       }

并添加你的html

<div class="row">
    <div class="small-1 columns"><span id="makemeboldlbl" class="inline radius secondary label right">Email:</span></div>
    <div class="small-3 columns left"><input type="email" id="profile_email" value="test@test.com" /></div>
 </div>

简单..：）

以基础为中心的2柱形式的大间隙

1 个答案: