全宽水平导航和基础框架

Question

我正在尝试使用 css 表格进行水平导航。当我只使用普通的 HTML 和 CSS 时，它可以正常工作，但当包含基础 css 时，它就不能正常工作。它左对齐而不是全宽。我究竟做错了什么？非常感谢。

基础 CSS 包括 - http://codepen.io/anon/pen/JdEJOm

HTML

<div class="row contain-to-grid">
      <nav class="top-bar" data-topbar role="navigation">
            <section class="top-bar-section">
                  <ul> 
                        <li><a href="#">asdf</a></li> 
                        <li><a href="#">asdasdasdasdasd asdasd</a></li> 
                        <li><a href="#">qweqweqwe</a></li> 
                        <li><a href="#">qwe</a></li> 
                        <li><a href="#">qwe</a></li> 
                        <li><a href="#">sdpofispdof</a></li> 
                  </ul> 
            </section> 
      </nav>
</div>

CSS

.top-bar .top-bar-section {
    width: 100%;
    display: table;
}
.top-bar .top-bar-section ul {
    display: table-row;
    width: inherit;
}
.top-bar .top-bar-section li {
    display: table-cell;
    width: auto;
    text-align: center;
    border: 1px dotted red;
}
.top-bar .top-bar-section a {
    display: block;
}

Answer 1

.top-bar-section ui li就是这里的问题child。当 min-width: 40.063em 被触发时，基金会强制它 float: left;。

如果您重写 float: left; 它将起作用。

@media only screen and (min-width: 40.063em) .top-bar-section ul li {
  float:left;
}

因此请更改您的 .top-bar .top-bar-section li css 以包含新的浮点值：

.top-bar .top-bar-section li {
  display: table-cell;
  width: auto;
  text-align: center;
  border: 1px dotted red;
  float: none;
}

如果您的自定义样式表在 foundation 之后加载，因为它会覆盖媒体调用，这将起作用。

全宽水平导航和基础框架

Full width horizontal navigation and Foundation framework

html

css

zurb-foundation