1

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

4

2 回答 2

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>
于 2013-06-13T11:40:03.383 回答
1

这是工作演示 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;
}
于 2013-06-13T12:06:04.213 回答