jquery对话框水平滚动条问题答案

【问题标题】：Jquery dialogue box horizontal scrollbar issuejquery对话框水平滚动条问题
【发布时间】：2013-06-13 20:06:04
【问题描述】：

我希望所有子 div 都应该与水平滚动条左对齐。但是在 jsfiddle(http://jsfiddle.net/PrZNr/95/) 子 div 不左对齐，仅当父 div 宽度增加时才左对齐。

<div id="items" style="width:700px;height:500;overflow:scroll">
    <div style="float:left;">
    <ul class="sort">
        <li >Item  A1sdfsdfsdfsdfsdfsdfyynynynyn</li>
        <li>Item A2</li>
        <li>Item A3</li>
        <li>Item A4</li>
        <li>Item A5</li>
        <li>Item A6</li>
        <li>Item A7</li>
        <li>Item A8</li>
        <li>Item A9</li>
        <li>Item A10</li>
    </ul>
</div>
    <div style="float:left;">
    <ul class="sort">
        <li >Item  A1sdfsdfsdfsdfsdfsdfyynynynyn</li>
        <li>Item A2</li>
        <li>Item A3</li>
        <li>Item A4</li>
        <li>Item A5</li>
        <li>Item A6</li>
        <li>Item A7</li>
        <li>Item A8</li>
        <li>Item A9</li>
        <li>Item A10</li>
    </ul>
</div>
</div>

但我希望父 div 的宽度应该是 100 px，所有子 div 应该左对齐，并且水平滚动条应该在对话框弹出窗口中

【问题讨论】：

标签： jquery popup jquery-dialog

【解决方案1】：

一种可能性是将两个子 div 包装在另一个 div 中，该 div 的宽度至少具有两个子级的宽度。这将为元素提供足够的空间以彼此相邻水平浮动。

看看我修改过的你的小提琴： http://jsfiddle.net/E8f86/

<div id="items" style="width:100px;height:500;overflow-x:scroll">
<div style="width:700px">
<div style="float:left;background:#efefef">
<ul class="sort">
    <li >Item  A1sdfsdfsdfsdfsdfsdfyynynynyn</li>
    <li>Item A2</li>
    <li>Item A3</li>
    <li>Item A4</li>
    <li>Item A5</li>
    <li>Item A6</li>
    <li>Item A7</li>
    <li>Item A8</li>
    <li>Item A9</li>
    <li>Item A10</li>
 </ul>
</div>
<div style="float:left;background:#ff00ff">
<ul class="sort">
    <li >Item  A1sdfsdfsdfsdfsdfsdfyynynynyn</li>
    <li>Item A2</li>
    <li>Item A3</li>
    <li>Item A4</li>
    <li>Item A5</li>
    <li>Item A6</li>
    <li>Item A7</li>
    <li>Item A8</li>
    <li>Item A9</li>
    <li>Item A10</li>
</ul>
</div>
</div>
</div>

【讨论】：

【解决方案2】：

这是工作 Demo http://jsfiddle.net/PRNBg/

我在外部 div 中添加了另一个 div 作为内联元素的容器（参见演示）
移除了样式属性 id="item" div

修改css

#items{  
  width:700px;  
  overflow-x:scroll;
  white-space: nowrap;
  background:#eee;
 }
#items div, ul
{
  display:inline-block;    
  float:left;
}

【讨论】：