雙水平滾動條顯示出來，只有1希望

<div class="row"> 
    <div class="col s8"> 
     <div style="overflow-x: auto;"> 
      <!-- I get a horizontal scrollbar within this element ONLY --> 
      <div style="margin-bottom: 5px; white-space: nowrap"> 
       <div class="treegen">1</div> 
       <div class="treegen">2</div> 
       <div class="treegen">3</div> 
       <div class="treegen">4</div> 
       <div class="treegen">5</div> 
      </div> 
      <div style="overflow-y: auto; min-height: 100px; max-height: 350px;"> 
       <!-- I get a horizontal scrollbar at this element too... --> 
       <ul class="tree"> <!-- very wide element --> 
        DATA IN THE UL 
       </ul> 
      </div> 
     </div> 
    </div> 
</div>

我試圖得到一個滾動條，只有具有overflow-x: auto;的元素，但我也把它與樹類的元素（或它的父）。我不想要第二個滾動條。我想在「樹」或它的父級上滾動高度，但我希望在兩個div上同時完成寬度滾動（<div style="margin-bottom: 5px; white-space: nowrap">和<div style="overflow-y: auto; min-height: 100px; max-height: 350px;">）。雙水平滾動條顯示出來，只有1希望

來源

2017-08-01 selten98

使用一個溢流而不是多個。當內容從預先定義的高度增加時，例如height：300px，overflow-y：auto會創建一個滾動條。與overflow-x相同：auto會在寬度從預定義寬度增加時創建一個滾動條。希望這可以解決你的問題。 – Aslam

@hunzaboy這並不能解決我的問題。我需要將兩者都用於設計。 – selten98

你可以展示一個工作演示或你需要的模型嗎？一個粗略的圖像將工作得很好... – Aslam

我能夠通過限制<ul class="tree">所在的div除以其他div的寬度（<div style="margin-bottom: 5px; white-space: nowrap">）來修復它。

結果（限於500像素時）：

<div class="row"> 
    <div class="col s8"> 
     <div style="overflow-x: auto;"> 
      <!-- I get a horizontal scrollbar within this element ONLY --> 
      <div style="margin-bottom: 5px; white-space: nowrap"> 
       <div class="treegen">1</div> 
       <div class="treegen">2</div> 
       <div class="treegen">3</div> 
       <div class="treegen">4</div> 
       <div class="treegen">5</div> 
      </div> 
      <div style="overflow-y: auto; min-height: 100px; max-height: 350px; width: 500px;"> 
       <!-- I get a horizontal scrollbar at this element too... --> 
       <ul class="tree"> <!-- very wide element --> 
        DATA IN THE UL 
       </ul> 
      </div> 
     </div> 
    </div> 
</div>

來源

2017-08-01 07:44:22 selten98

雙水平滾動條顯示出來，只有1希望

回答

相關問題