Question

我想摆脱this screenshot上绿色按钮左侧的间隙。我似乎无法找到任何方法将其删除。

标记：

<div class="row">

    <div class="small-4 medium-5 large-4 columns">          
        <a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>   
    </div>

    <div class="small-6 medium-5 large-6 columns">      

        <ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list"> 
            <li id="jason_computing_self_paced">Self-paced</li>
            <li id="jason_computing_hours_week">4 hours a week</li>
            <li id="jason_computing_assignments">3 Assignments</li>
            <li id="jason_computing_challenges">18 Challenges</li>
        </ul>

    </div>

</div>

AA

Answer 1

默认情况下，Foundation会对列应用右侧和左侧填充。我创建了一个包含几个选项的代码段。您可以定位列;或者只是创建一个类并添加一个左填充规则。

＆＃13;

/* -- target the first-child column -- */
.row .columns:first-child {
  padding-left: 0;
}

/* -- create a class ('button-enroll' for example ) -- */
.button-enroll {
  padding-left: 0;
}

＆＃13;

<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css" rel="stylesheet"/>

<div class="row">

    <div class="small-4 medium-5 large-4 columns button-enroll">          
        <a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>   
    </div>

    <div class="small-6 medium-5 large-6 columns">      

        <ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list"> 
            <li id="jason_computing_self_paced">Self-paced</li>
            <li id="jason_computing_hours_week">4 hours a week</li>
            <li id="jason_computing_assignments">3 Assignments</li>
            <li id="jason_computing_challenges">18 Challenges</li>
        </ul>

    </div>

</div>

＆＃13;

基础5：删除列左侧的间隙

1 个答案: