2

使用PureCSS我正在尝试更改他们的响应式水平到垂直菜单示例以满足我的需要。

我想将水平导航分成两行，但我没有成功尝试使用 css3 列，如Stackoverflow answer中所述。

我怎么能解决这个问题？也许我必须覆盖 PureCSS 设置的东西？

看到这个Plunker。请注意，对于 1024 像素以下的宽度，水平导航是隐藏的，因此使其变宽以查看（水平）导航（对于较小的尺寸，还有一个垂直导航，这里不感兴趣）。

相关的（自制）CSS 是：

.pure-menu-list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
    text-align: center;
}

的HTML：

  <div class="custom-wrapper pure-g" id="menu">
    <div class="pure-u-1 pure-u-lg-1-5">
      <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Braand</a>
        <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
      </div>
    </div>
    <div class="pure-u-1 pure-u-lg-4-5">
      <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
          <li class="pure-menu-item"><a href="/1" class="pure-menu-link">Navlink number 1</a></li>
          <li class="pure-menu-item"><a href="/2" class="pure-menu-link">Navlink number 2</a></li>
          <li class="pure-menu-item"><a href="/3" class="pure-menu-link">Navlink number 3</a></li>
          <li class="pure-menu-item"><a href="/4" class="pure-menu-link">Navlink number 4</a></li>
          <li class="pure-menu-item"><a href="/5" class="pure-menu-link">Navlink number 5</a></li>
          <li class="pure-menu-item"><a href="/6" class="pure-menu-link">Navlink number 6</a></li>
          <li class="pure-menu-item"><a href="/7" class="pure-menu-link">Navlink number 7</a></li>
          <li class="pure-menu-item"><a href="/8" class="pure-menu-link">Navlink number 8</a></li>
          <li class="pure-menu-item"><a href="/9" class="pure-menu-link">Navlink number 9</a></li>
          <li class="pure-menu-item"><a href="/10" class="pure-menu-link">Navlink number 10</a></li>
        </ul>
      </div>
    </div>
  </div>
4

1 回答 1

1

在多行上显示元素与 无关columns，但与wrapping. 您想white-space: nowrap;通过 Pure on 覆盖设置.pure-menu-horizontal：

div.pure-menu-horizontal {
     white-space: initial; 
}
<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet"/>

      <div class="custom-wrapper pure-g" id="menu">
        <div class="pure-u-1 pure-u-lg-1-5">
          <div class="pure-menu">
            <a href="#" class="pure-menu-heading custom-brand">Braand</a>
            <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
          </div>
        </div>
        <div class="pure-u-1 pure-u-lg-4-5">
          <div class="pure-menu pure-menu-horizontal custom-can-transform">
            <ul class="pure-menu-list">
              <li class="pure-menu-item"><a href="/1" class="pure-menu-link">Navlink number 1</a></li>
              <li class="pure-menu-item"><a href="/2" class="pure-menu-link">Navlink number 2</a></li>
              <li class="pure-menu-item"><a href="/3" class="pure-menu-link">Navlink number 3</a></li>
              <li class="pure-menu-item"><a href="/4" class="pure-menu-link">Navlink number 4</a></li>
              <li class="pure-menu-item"><a href="/5" class="pure-menu-link">Navlink number 5</a></li>
              <li class="pure-menu-item"><a href="/6" class="pure-menu-link">Navlink number 6</a></li>
              <li class="pure-menu-item"><a href="/7" class="pure-menu-link">Navlink number 7</a></li>
              <li class="pure-menu-item"><a href="/8" class="pure-menu-link">Navlink number 8</a></li>
              <li class="pure-menu-item"><a href="/9" class="pure-menu-link">Navlink number 9</a></li>
              <li class="pure-menu-item"><a href="/10" class="pure-menu-link">Navlink number 10</a></li>
            </ul>
          </div>
        </div>
      </div>

这是您想要的还是您想要计算项目并确保它们在两行之间平均分配？

于 2015-12-09T15:30:40.830 回答