固定宽度 div 中的水平滚动内容答案

【问题标题】：Horizontal scroll content in fixed width div固定宽度 div 中的水平滚动内容
【发布时间】：2016-12-28 06:59:27
【问题描述】：

这是移动视图。链接 div 中的宽度为 100%。我想水平滚动这个 div 的内容而不滚动整个页面。下面是html代码。

          <div class="links">
            <ul>
              <li>Home</li>
              <li>Private Equity</li>
              <li>Venture Capital</li>
              <li>M&A</li>
              <li>Markets</li>
              <li>Industry</li>
              <li>Economy</li>
            </ul>
          </div>

和 CSS

.links{
width: 100%

  ul{
    padding:0px;
    margin:0px;

    @media only screen and (max-width : 480px){
      white-space: nowrap;
    }
  }

  ul li{
    list-style-type: none;
    display: inline-block;
    padding:8px 30px;
    text-transform: uppercase;
    font-family: $roboto;
    font-size: 20px;
    font-weight: 300;
    font-stretch: condensed;
    line-height: 1;
    border-right:1px solid #000;

    &:last-child{
      border-right:0px;
    }
  }
}

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

您只需要在您的 div 上添加一个 overflow-x: scroll：https://jsfiddle.net/m5k5Lkm4/

另外，我不知道您使用什么来加载 HTML，但如果它是原始 HTML，您需要将“M&A”中的 & 转义为 HTML 实体。

【讨论】：

没问题！我还想指出，@scaisEdge 的回答最终也会做同样的事情。

【解决方案2】：

你可以在课堂上添加

 .links {
     overflow: auto;
     overflow-y: hidden;
  ....

【讨论】：