PanelBar擴展太遠，然後滑動

我有一個面板欄顯示幾個div/UL。例如，當列表的寬度設置爲40％時，會導致面板欄向下滑動，然後跳回原來的位置。取消UL上的40％，並且一切按預期工作。PanelBar擴展太遠，然後滑動

版本2015.3.930有此問題，而舊版本（隨機選取的2011.3.1407）則沒有。

<ul class="doctypecontainer noselect"> 
    <li style="clear:both;"> 
     <span>Truck Freight Bill (1)</span> 

     <div class="doctypecontainercontent"> 
      <div class="docdatelabel"><input type="checkbox" />10/27/2015</div> 
      <ul class="pagelist"> 
       <li><input type="checkbox" /><span>Page 1</span></li> 
       <li><input type="checkbox" /><span>Page 2</span></li> 
       <li><input type="checkbox" /><span>Page 3</span></li> 
      </ul> 
      <ul class="pagelist"> 
       <li><input type="checkbox" /><span>Page 4</span></li> 
       <li><input type="checkbox" /><span>Page 5</span></li> 
       <li><input type="checkbox" /><span>Page 6</span></li> 
      </ul> 

      <div class="docdatelabel"><input type="checkbox" />11/15/2015</div> 
      <ul class="pagelist"> 
       <li><input type="checkbox" /><span>Page 1</span></li> 
       <li><input type="checkbox" /><span>Page 2</span></li> 
       <li><input type="checkbox" /><span>Page 3</span></li> 
      </ul> 

      <div class="docdatelabel"><input type="checkbox" />11/21/2015</div> 
      <ul class="pagelist"> 
       <li><input type="checkbox" /><span>Page 1</span></li> 
       <li><input type="checkbox" /><span>Page 2</span></li> 
       <li><input type="checkbox" /><span>Page 3</span></li> 
      </ul> 

      <span style="clear:left; display:block;"></span> 
     </div> 

    </li> 
</ul>

見小提琴這裏：http://jsfiddle.net/u48kLrem/

刪除寬度：40％來自於分頁類，並將其作爲幻燈片預期。

來源

2015-11-12 Brian M.

哪裏是在小提琴的分頁類？小提琴是差異。 –

啊，堅果。我把錯誤的鏈接。它已更新。 –

這是由於容器和'float：left'屬性應用了'display：none'。該控件不能正確計算高度。你應該刪除寬度屬性，在它可以添加'padding-right'的地方，組間的距離相同。 –

我不知道，男人。我懷疑它與文本包裝（或包裝物）有關，並導致錯誤計算高度。可能只是他們的編碼不好，但一個簡單的修改會導致跳躍消失。此外，這種修改也應該使它更可靠/面向未來。

.pagelist { 
    padding-bottom:5px; 
    list-style-type:none; 
    padding-left:10px; 
    width: 50%; /* change this to 50% */ 
    float: left; 
    box-sizing: border-box; /* add this to force it to calculate 
           the padding in with the width to 
           total 50% */ 
}

演示：http://jsfiddle.net/jmarikle/2ekxpuu6/

來源

2015-11-12 20:57:51

嘿，看起來就是這樣。非常感謝。出於好奇，爲什麼它更可靠/未來的證明？ –

@BrianM。在大多數情況下，50％+ 50％更可能始終等於100％，而不是40％+ 40％+某些像素值小於20％。隨着試圖推測像素值始終低於20％，會引入不必要的複雜性，從而可能導致後續的錯誤大小。這對於響應式應用程序尤其有問題，因爲您通常將寬度設置爲某個列或容器的100％。對於較窄的屏幕，您更有可能看到您的像素值超過了20％的上限。最後，讓你的兩列50％更簡單。 –

哦，我以爲你的意思是盒子大小，但這也有道理。謝謝（你的）信息。 –

PanelBar擴展太遠，然後滑動

回答

相關問題