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

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

全宽水平导航和基础框架

1 个答案: