CSS溢出不起作用

Question

我有面板，我只是在里面显示一些html列表元素。我已将overflow:auto;用于主<ul>，但如果<li>数据包含一些长文本，则会在下一行显示。

是否可以在主面板中使用水平滚动条包裹在同一行中。我希望数据应该是单行的。

链接到JS小提琴：http://jsfiddle.net/skumary2k/7wj7mje2/

HTML code：

<div style="overflow:hidden; position:absolute; top:0px; height:350px; width:870px;"
     role="group" class="k-pane k-scrollable">
  <div class="miller-column-wrap">
    <div class="miller-column-inner-wrap">
      <div id="millersColID" tabindex="0" class="miller">
        <div class="columns">
          <ul style="top: 0px; left: 0px;">
            <li>This is some really very long long long data which I need to show here... #1</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码：

.miller
{
    font-family:  Arial;
    font-size: 12px;
    position: relative;
    border: solid 1px #ddd;
    border-radius: 4px;
    color: #282828;
/*  margin-bottom: 20px; */
    width: 600px;
    height: 300px;
/*  background: #f5f5f5; */
    outline: 0;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.miller div.columns
{
    position: absolute;
    width: 100%;
    height: 275px;
    left: 0;
    top: 20px;
    /*padding: 10px;*/
    margin: 0;
    overflow: auto;
}

.miller div.columns ul
{
    box-shadow: #aaa 4px 0 8px 0px;
    position: absolute;
    border-right: solid 1px #ddd;
    padding: 0;
    margin: 0;
    background: #fcfcfc;
    overflow: auto;
    width: 325px;
    height: 275px;
}

.miller li
{
    border: solid 1px #fff;
    padding-left: 30px;
    padding-right: 0.5em;
    list-style-type: none;
    cursor: pointer;
    height: 35px;
    line-height: 35px;
    width: 325px;

}