只应使用overflow-x而不是overflow-y

Question

您好我尝试使用overflow-x而不是overflow-y

结构就像

<div id="container">
<ul>
    <li>
        <span>Head1</span>
        <ul>
            <li>feild1</li>
            <li>feild2</li>
        </ul>
    </li>
    <li>
         <span>Head2</span>
        <ul>
            <li>feild1</li>
            <li>feild2</li>
        </ul>
    </li>
    <li>
        <span>Head3</span>
        <ul>
            <li>feild1</li>
            <li>feild2</li>
        </ul>
    </li>
    <li>
         <span>Head4</span>
        <ul>
            <li>feild1</li>
            <li>feild2</li>
        </ul>
    </li>
    <li>
         <span>Head5</span>
        <ul>
            <li>feild1</li>
            <li>feild2</li>
        </ul>
    </li>
     <li>
         <span>Head6</span>
        <ul>
            <li>feild1</li>
            <li>feild2</li>
        </ul>
    </li>
     <li>
         <span>Head7</span>
        <ul>
            <li>feild1</li>
            <li>feild2</li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

#container {
  float: left;
  max-width: 234px;
  background-color: gray;
  max-height: 250px;
}
#container > ul {
  list-style: none;
  float: left;
  max-width: 194px;
  height: 70px;
  background-color: white;
  overflow: auto;
}
#container > ul > li {
  float: left;
  width: auto;
}

＆＃13;

<div id="container">
  <ul>
    <li>
      <span>Head1</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head2</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head3</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head4</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head5</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head6</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head7</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13; 主div #container仍然在最大宽度之下。 ul应该水平溢出而不是垂直溢出

这里是jsfiddle

Answer 1

将父ul显示为table-row，将list item显示为table-cell，并将overflow-y设为hidden

#container{
    float: left;
    max-width: 234px;
    background-color: gray;
    max-height: 250px;
}

#parentul{
    list-style: none;
    float: left;
    max-width: 194px;
    height: 70px;
    background-color: white;
    overflow: auto;
    display:table-row;
    overflow-y: hidden;
}

#parentul>li{
    display:table-cell;
}

DEMO

Answer 2

从您的CSS中删除overflow : auto;。 “自动溢出只会为盒子提供所需的滚动条。”

添加此

overflow-x: scroll;
overflow-y: hidden;

#container {
  float: left;
  max-width: 234px;
  background-color: gray;
  max-height: 250px;
}
#container > ul {
  list-style: none;
  float: left;
  max-width: 194px;
  height: 70px;
  background-color: white;
  overflow-x: scroll;
  overflow-y: hidden;
}
#container > ul > li {
  float: left;
  width: auto;
}

<div id="container">
  <ul>
    <li>
      <span>Head1</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head2</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head3</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head4</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head5</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head6</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
    <li>
      <span>Head7</span>
      <ul>
        <li>feild1</li>
        <li>feild2</li>
      </ul>
    </li>
  </ul>
</div>

仅示例水平滚动：http://jsfiddle.net/p2utguhm/3/