如何设置overflow-x：自动嵌套嵌套？

Question

 #create-summary { width: 200px; height:150px; margin-top:20px; overflow-x:auto; overflow-y:auto; } .lv2 { margin-left:15px; } .lv3, .lv4, .lv5, .lv6{ margin-left:15px; } #create-summary div { border:1px solid red; } 

 <div id="create-summary"> <div class="lv1"> 1. Title1 <div class="lv2">1.1. Title1.1</div> <div class="lv2"> 1.2. Title1.2 <div class="lv3">1.2.1. Title1.2.1</div> <div class="lv3"> 1.2.2. Title1.2.2 <div class="lv4"> 1.2.2.1. Title1.2.2.1 <div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div> </div> <div class="lv4">1.2.2.2. Title1.2.2.2 <div class="lv5">1.2.2.2.1. Title1.2.2.2.1</div> <div class="lv5">1.2.2.2.2. Title1.2.2.2.2 <div class="lv6">1.2.2.2.2.1 Title1.2.2.2.2.1</div> </div> </div> </div> </div> </div> </div> 

As you can see the class "lv6" and class"lv5" is not display correctly even I set overflow-x:auto. How to set overflow:x auto to make it correctly?

Answer 1

You mean like that?

 #create-summary { width: 180px; height:200px; margin-top:20px; overflow-x: auto; } .lv2 { margin-left:15px; } .lv3, .lv4, .lv5, .lv6{ margin-left:15px; white-space: nowrap; } 

 <div id="create-summary"> <div class="lv1"> 1. Title1 <div class="lv2">1.1. Title1.1</div> <div class="lv2"> 1.2. Title1.2 <div class="lv3">1.2.1. Title1.2.1</div> <div class="lv3"> 1.2.2. Title1.2.2 <div class="lv4"> 1.2.2.1. Title1.2.2.1 <div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div> </div> <div class="lv4">1.2.2.2. Title1.2.2.2</div> </div> </div> </div> </div> 

Answer 2

You need to make the whole div larger, Or you can set overflow-x to scroll.

 #create-summary { width: 250px; height:200px; margin-top:20px; } .lv2 { margin-left:15px; } .lv3, .lv4, .lv5, .lv6{ margin-left:15px; } #create-summary div { border:1px solid red; } 

 <div id="create-summary"> <div class="lv1"> 1. Title1 <div class="lv2">1.1. Title1.1</div> <div class="lv2"> 1.2. Title1.2 <div class="lv3">1.2.1. Title1.2.1</div> <div class="lv3"> 1.2.2. Title1.2.2 <div class="lv4"> 1.2.2.1. Title1.2.2.1 <div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div> </div> <div class="lv4">1.2.2.2. Title1.2.2.2</div> </div> </div> </div> </div> 

Answer 3

Add CSS white-space: nowrap; to lvl elements.