我如何将其与基础前端框架工作结合起来？

Question

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

我想把上面的导航栏直接居中放置在页面上。我已经尝试了一切，但它正在杀死我。执行此操作的最佳方法是什么？

Answer 1

您可以使用 *-centered class 将列居中。例如：

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

更新

/*** 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;
}

<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>

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

我如何将其与基础前端框架工作结合起来？

How can I center this with foundation front-end frame work?

css

zurb-foundation