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

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> 

更新

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