html - 应该只使用 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>

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

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

主 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