我有以下代码创建树使用李
- 问题:当树得到大于屏幕宽度的李大到所有树级别的新线 ,所以我需要为防止断力,使页面滚动防止多级李水平打破
<style>
.tree * {
margin: 0;
padding: 0;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
}
.tree li .trcont {
width: 140px;
border: 1px solid #ccc;
padding: 5px 10px;
display: inline-block;
}
</style>
<div class="tree">
<ul id="list">
<li>
<div class="trcont">AA11</div>
<div class="trchl">
<ul id="lst">
<div class="bfrul"></div>
<li id="frstliaax">
<div class="before"></div>
<div class="trcont">First LI</div>
<div class="trchl">
<ul>
<div class="bfrul"></div>
<li>
<div class="before"></div>
<div class="trcont">xxxxxx</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
</ul>
</div>
<div class="after"></div>
</li>
<li>
<div class="before"></div>
<div class="trcont">B->3</div>
<div class="trchl">
<ul>
<div class="bfrul"></div>
<li>
<div class="before"></div>
<div class="trcont">CCCCCCCC</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
<li>
<div class="before"></div>
<div class="trcont">jjjjjjjjjj</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
</ul>
</div>
<div class="after"></div>
</li>
<li>
<div class="before"></div>
<div class="trcont">LAST LI</div>
<div class="trchl">
<ul>
<div class="bfrul"></div>
<li>
<div class="before"></div>
<div class="trcont">AAA</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
<li>
<div class="before"></div>
<div class="trcont">BBB</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
<li>
<div class="before"></div>
<div class="trcont">Last Li XX</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
</ul>
</div>
<div class="after"></div>
</li>
<li>
<div class="before"></div>
<div class="trcont">LAST LI</div>
<div class="trchl">
<ul>
<div class="bfrul"></div>
<li>
<div class="before"></div>
<div class="trcont">AAA</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
<li>
<div class="before"></div>
<div class="trcont">BBB</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
<li>
<div class="before"></div>
<div class="trcont">Last Li XX</div>
<div class="trchl"></div>
<div class="after"></div>
</li>
</ul>
</div>
<div class="after"></div>
</li>
</ul>
</div>
</li>
</ul>
</div>
如果它们不断为行,应该有一个水平滚动条,否则溢出内容将被隐藏(这对于用户可用) –
ü试图溢出:汽车? – ajc
你描述了你不希望它做的事情,但不是你期望它做什么。 –