Thụt lề trong danh sách lồng nhau trong HTML/CSS

Question

Tôi đã bắt đầu sử dụng Twitter Bootstrap, điều này rất hữu ích đối với tôi (như một lập trình viên) để có được trang web tìm kiếm phong nha mà không cần phải viết nhiều CSS.

Tuy nhiên, điều gì đó khiến tôi phát điên. Tôi có một danh sách lồng nhau như

<ul> 
    <li>Hello</li> 
    <li>World 
    <ul> 
     <li>Wide</li> 
     <li>Web</li> 
    </ul> 
    </li> 
</ul> 

Nhưng mức độ đầu tiên và thứ hai trong danh sách này không nhận được thụt vào khác nhau (ví dụ. Họ gắn kết với nhau ở bên trái)

Trong danh sách html lồng bình thường, sâu sắc hơn danh sách con thụt lề nhiều hơn. Nhưng một cái gì đó trong phong cách trang tính phải được tắt này. Làm thế nào để tôi tìm thấy những gì điều khiển này? Tôi không thể thấy thuộc tính CSS "list indent" cho các phần tử li trong bất kỳ tài liệu nào.

Answer 1

Bạn đang tìm kiếm để thiết lập padding-left:

li { padding-left: 1em; } 

sẽ thụt mỗi 1em li. Kể từ khi lis bên trong đã được bù đắp từ lis bên ngoài, nó phải làm những gì bạn muốn.

Answer 2

Chỉ cần sử dụng Firebug trong FF hoặc Chrome dev-tools: nhấp chuột phải vào mục tiêu của bạn và select inspect yếu tố. Bạn có thể kiểm tra trực quan và văn bản các thuộc tính CSS để xem điều gì gây ra sự sụp đổ.

Bạn có thể muốn một quy tắc như

ul > li { 
    margin-left: 10px; 
} 

Answer 3

Chỉ cần để thêm vào các câu trả lời ở trên: padding-left sẽ thụt dòng chữ, nhưng không phải là điểm viên đạn, trong khi margin-left sẽ thụt điểm đạn là tốt.

Ví dụ: http://jsfiddle.net/GMLxv/

Answer 4

Tôi gặp vấn đề tương tự như bạn.

Có một quy tắc trong type.less huỷ bỏ thụt đầu dòng cho các danh sách:

ul, ol { 
    padding: 0; 
    margin: 0 0 @baseLineHeight/2 25px; 
} 

tôi đã kết thúc trọng quy tắc này:

ul, ol { 
    padding: 0px 25px; 
} 

lõm trong danh sách lồng nhau tại là trở lại.

Answer 5

Có lẽ bạn đã đặt dấu đầu dòng của mình ở bên trong các mục danh sách thay vì trước đó, điều này sẽ thay đổi giao diện của bạn khá đáng kể.

CSS để áp dụng nó: ul { list-style-position: inside; }

Đọc thêm về list-style-position.

Ví dụ: https://jsfiddle.net/g0k0obwh/

Answer 6

Sử dụng Bootstrap bạn có thể làm điều đó bằng cách mã hóa như sau. Chỉ cần dán nó JSP hoặc HTML của bạn và kiểm tra nó. Bạn có thể đi qua liên kết này để biết thêm thông tin.

http://www.bootply.com/DglnYJTSKA

<div id="MainMenu"> 
     <div class="list-group panel"> 
      <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a> 
      <div class="collapse" id="demo3"> 
      <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a> 
      <div class="collapse list-group-submenu" id="SubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a> 
       <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a> 
       <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a> 
       </div> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a> 
      </div> 
      <a href="javascript:;" class="list-group-item">Subitem 2</a> 
      <a href="javascript:;" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a> 
      <div class="collapse" id="demo4"> 
      <a href="" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a> 
      <div class="collapse" id="demo5"> 
      <a href="#" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
     </div> 
     </div> 

CSS:

.list-group.panel > .list-group-item { 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px 
} 
.list-group-submenu { 
    margin-left:20px; 
} 

Answer 7

Làm cách đơn giản sử dụng nhóm danh sách

này đưa ra một danh sách lồng nhau:

<ul class="list-group"> 
     <li class="list-group-item">Cras justo odio</li> 
     <li class="list-group-item"> 
       <ul class="list-group"> 
        <li class="list-group-item">Cras justo odio</li> 
        <li class="list-group-item"> 
         <ul class="list-group"> 
          <li class="list-group-item">Cras justo odio</li> 
          <li class="list-group-item">Dapibus ac facilisis in</li> 
         </ul> 
        </li> 

      </ul> 
     </li> 
     <li class="list-group-item">Morbi leo risus</li> 
     <li class="list-group-item">Porta ac consectetur ac</li> 
     <li class="list-group-item">Vestibulum at eros</li> 
</ul>