Question

.row.navigation
  .small-12.columns
  %ul.inline-list
    %li
      %a{:href => "#"} HOME
    %li
      %a{:href => "#"} RESUMÉ
    %li
      %a{:href => "#"} CONTACT

我想将上面的导航栏直接放在页面上。我已经尝试过所有事情并且它会杀了我。最好的方法是什么？

Answer 1

您可以使用*-centered类来居中列。例如：

<div class="row"> 
  <div class="small-3 small-centered columns">3 centered</div>
</div>

<强>更新

＆＃13;

/*** Foundation CSS ***/
.inline-list {
    margin: 0px 0px 0.94444rem -1.22222rem;
    padding: 0px;
    list-style: outside none none;
    overflow: hidden;
}
.inline-list > li {
    list-style: outside none none;
    float: left;
    margin-left: 1.22222rem;
    display: block;
}
/**********************/

.nav-container {
    text-align: center;
}
.nav-container ul {
    display: inline-block;
}

＆＃13;

<div class="nav-container">
  <ul class="inline-list">
    <li><a href="#">Home</a>
    <li><a href="#">Resume</a>
    <li><a href="#">Contact</a>
  </ul>
</div>

＆＃13;

Answer 2

使用HAML时，缩进是正确的，这一点非常重要。 luke2012发布的答案应该有效;但是你的内联列表应该嵌套在div列中。目前它只嵌套在行中。

以下代码应该有效：

.row.navigation
  .small-12.columns.small-centered
    %ul.inline-list
      %li
        %a{:href => "#"} HOME
      %li
        %a{:href => "#"} RESUMÉ
      %li
        %a{:href => "#"} CONTACT

如何将基础前端框架集中在一起？

2 个答案: