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ピクセルにし、すべての子divを左揃えにし、ダイアログポップアップウィンドウに水平スクロールバーを表示する必要があります

4

2 に答える 2

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 に答える
1

1 つの可能性は、2 つの子 div を別の div でラップすることです。この div には幅があり、少なくとも 2 つの子を合わせた幅があります。これにより、要素が互いに隣り合って水平に浮くのに十分なスペースが与えられます。

あなたの私の修正されたフィドルを参照してください： 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 に答える