Question

我希望所有子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应该保持对齐并且水平滚动条应该在对话框弹出窗口中

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

Answer 2

以下是工作演示 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;
}

Jquery对话框水平滚动条问题

2 个答案: