2013-06-30 80 views
5

Tôi thấy các mục của ol có lề trái, nhưng <p>This is first row</p> không để lề, vì vậy, ba hàng này không thể căn chỉnh. Làm thế nào tôi có thể làm cho chúng được căn trái? Cảm ơn!ol li có lề trái và không thể căn chỉnh

Bạn có thể xem kết quả tại địa chỉ:

hoặc trong Dropbox tại địa chỉ:

https://www.dropbox.com/s/nr4bb00sd80pgl9/Mycss.PNG

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     li.A { 
      list-style-type: decimal; 
      font-weight: bold; 
      margin-bottom:15px;   
     } 

     li.B{ 
      list-style-type:upper-alpha; 
      font-weight:normal; 
      margin-top:4px; 
      margin-bottom:4px; 

     } 

     ol.C { 

     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <p>This is first row</p> 
     <ol> 
      <li class="A">DIY SMS Export V1.05 has been released 
       <ol class="C"> 
        <li class="B">Add the function to delete sms selected</li> 
       </ol> 
      </li> 

      <li class="A">DIY SMS Export V1.04 has been released 
       <ol class="C"> 
        <li class="B">Add chinese language support</li> 
       </ol> 
      </li> 
     </ol> 
    </div> 
    </form> 
</body> 
</html> 

Trả lời

17

Các bạn đã thử thêm css:

ol{ padding-left:0; list-style-position:inside; } 

working jsFiddle

+0

Dừng sao chép những gì người khác đã gửi – Hive7

+0

không sao chép, tạo một jsFiddle và nhận ra con số không hiển thị .. này là công cụ khá cơ bản .. –

+0

là bạn mà downvoted? – Hive7

1

Để có được tất cả những gì tất cả các cách trên bên trái, hãy thử này:

ol, ol li { margin-left:0; padding-left:0; list-style-position:inside; } 
3

Có xem xét này JS Fiddle: http://jsfiddle.net/BPFQm/1/

Bạn có hai lựa chọn, tôi nghĩ: Sử dụng list-style-position: inside và đặt padding-left: 0 (lớp "bên trong" trong ví dụ). (Sử dụng list-style-positionexplained on MDN here). Hoặc bạn có thể thao tác padding-left cho đến khi nó thẳng hàng với văn bản đoạn văn của bạn.

Một số câu trả lời khác đề xuất thêm margin-left: 0 nhưng tôi không chắc chắn điều đó là cần thiết. Nó chắc chắn không cần thiết trong Fiddle của tôi.

CẬP NHẬT: Nhìn vào JS Fiddle Tôi đã thực hiện lại và bạn sẽ thấy sự khác biệt quan trọng giữa hai phương pháp, hiển thị khi/nếu mục danh sách của bạn kéo dài nhiều dòng. Nếu bạn sử dụng list-style-position: inside thì các dòng tiếp theo sẽ bị xóa bằng số/nhãn; trong khi thay đổi phần đệm trái duy trì định dạng chuẩn, trong đó văn bản có lề riêng của nó ở bên phải của số/nhãn. Chọn bất cứ định dạng nào bạn thích cho mục đích của mình, tôi cho là vậy.

0

Bydefault tất cả các thẻ ol/ul có một số phần đệm từ bên trái. bạn có thể loại bỏ phần đệm đó sau đó nó sẽ hoạt động.

ol, ul { 
    padding-left: 0; 
    list-style-position: inside; 
} 

đoạn kiểm tra dưới đây

ol, ul { 
 
    padding-left: 0; 
 
    list-style-position: inside; 
 
}
<ol> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
</ol> 
 

 
<ul> 
 
    <li>list-item - 1</li> 
 
    <li>list-item - 2</li> 
 
    <li>list-item - 3</li> 
 
    <li>list-item - 4</li> 
 
    <li>list-item - 5</li> 
 
</ul>

Các vấn đề liên quan