UI LI導致水平滾動條

我使用UL和LI元素來製作一棵樹。樹可以有n級。爲了使UL李看起來像我使用下面的CSS樹：UI LI導致水平滾動條

.TreeView 
{ 
    font: Verdana; 
    line-height: 20px; 
    cursor: pointer; 
    font-style: normal; 
} 

.TreeView LI 
{ 
    /* The padding is for the tree view nodes */ 
    padding: 0 0 0 18px; 
    float: left; 
    width: 100%; 
    list-style: none; 
} 

.TreeView, .TreeView ul 
{ 
    margin: 0; 
    padding: 0; 
}

和HTML是

<ul class="TreeView"> 
    <li>some text 
    <ul class="TreeView"> 
      <li>some text 
      <ul class="TreeView"> 
       <li>some text 
         ..... this can be n level 
       </li> 
      </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

在上述結構中的所有李的將有20像素的填充從左所以當等級提升它將導致水平滾動。

如何避免水平滾動？

來源

2014-06-05 nrsharma

根據我對你的其他帖子的評論，請不要恢復編輯，除非問題的新形式與帖子的目的相悖。在這裏清理閒聊帖子很正常。如果您不同意我的修改，請在您不同意的每一篇文章中對我進行平郵，以便我可以邀請主持人。謝謝你的幫助！ – halfer

使用

box-sizing:border-box;

如li元素;

.TreeView LI 
{ 
/* The padding is for the tree view nodes */ 
padding: 0 0 0 18px; 
float: left; 
width: 100%; 
list-style: none; 
box-sizing:border-box; 
-webkit-box-sizing:border-box; 
}

http://jsfiddle.net/qfQ53/2/

來源

2014-06-05 07:04:06 midstack

是的..它在IE瀏覽器中都可用。當你爲web-kit瀏覽器放置css時，我對IE有點奇怪，但無論如何它工作正常。 – nrsharma

它適用於IE8 + http://caniuse.com/css3-boxsizing – midstack

是的，它對我來說是好運，因爲我不允許IE <= 8。感謝BRO的一般和簡短而甜蜜的回答:) .. – nrsharma

您可以嘗試刪除的寬度和浮動屬性，並添加以下內容到UL CSS

overflow: hidden;

請報到，當你做，如果你能這麼甚至更好的創建JFiddle所發生的變化。

來源

2014-06-05 06:59:04

它會隱藏所有的滾動條..我不認爲這是一個通用的解決方案？ – nrsharma

@nrsharma它只會隱藏該特定ul中的滾動條。它應該可以正常工作，你面臨的問題是什麼？ –

你可以試試這個CSS：

overflow-x:hidden;

隱藏只有水平滾動條

來源

2014-06-05 07:04:31 babusi

它會隱藏水平滾動條..我不認爲這是一個通用的解決方案？ – nrsharma

Demo

從.TreeView LI

刪除paddinglist-style作爲

ul { 
    list-style: <list-style-type> || <list-style-position> || <list-style-image>; 
}

您需要list-style-position : outside如下

ul { 
    list-style:decimal outside none; 
}

你最終的CSS

.TreeView { 
    font: Verdana; 
    line-height: 20px; 
    cursor: pointer; 
    font-style: normal; 
} 
.TreeView LI { 
    /* The padding is for the tree view nodes */ 
    /*padding: 0 0 0 18px;*/ 
    float: left; 
    width: 100%; 
    list-style: none; 
} 
ul { 
    list-style:decimal outside none; 
}

例HTML添加了可以使用ulli

<ul class="TreeView"> 
    <li>some text 
     <ul class="TreeView"> 
      <li>some text 
       <ul class="TreeView"> 
        <li>some text 
         <ul class="TreeView"> 
          <li>some text 
           <ul class="TreeView"> 
            <li>some text 
             <ul class="TreeView"> 
               <li>some text 
                <ul class="TreeView"> 
                 <li>some text ..... this can be n level</li> 
                </ul> 
               </li> 
             </ul> 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

EDIT

Demo

給出可變的填充

ul { 
    list-style:decimal outside none; 
    padding: 0 0 0 18px 
}

Read here for more details

來源

2014-06-05 07:07:08 4dgaurav

它會爲li元素添加一個不變的填充。我不想那樣。但是，謝謝你的回答.. – nrsharma

如果你添加'padding：0 0 0 18px;'那也是一個不斷的填充？你希望它的行爲是什麼？ – 4dgaurav

填充可以有所不同，但在您的示例中沒有任何計數。無論如何，你的答案也是有用的:) – nrsharma

UI LI導致水平滾動條

回答

相關問題