全宽度水平导航与基础框架

Question

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

普通代码- http://codepen.io/anon/pen/yNgXPo

基金会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是这里的问题孩子。当触发float: left;时，基金会会将其强制为min-width: 40.063em。

如果您重写了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;
}

如果您的自定义样式表是在基础之后加载的，因为它会覆盖媒体调用，这将有效。