Question

我使用UL和LI元素制作树。树可以有n级。为了让UL Li看起来像一棵树，我正在使用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; 
}

.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>

在上面的结构中，所有LI的左边都有20px的填充，所以当等级增加时，它会导致水平滚动。

如何避免水平滚动？

Answer 1

使用

box-sizing:border-box;

for li element as;

.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/

Answer 2

您可以尝试删除width和float属性并将其添加到ul css

overflow: hidden;

请报告您在执行此操作时发生的更改，或者如果可以，请更好地创建JFiddle。

Answer 3

你可以尝试这个CSS：

overflow-x:hidden;

仅隐藏水平滚动条

Answer 4

Demo

从padding

中删除.TreeView LI

您可以将list-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;
}

添加了ul li

的HTML示例

<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>

的修改

Demo

用于给出变量填充

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

Read here for more details

Ul LI导致水平滚动条

4 个答案: