Làm cách nào để giữ thụt lề cho dòng thứ hai trong danh sách được sắp xếp qua CSS?

260

Tôi muốn có một danh sách "bên trong" với các dấu đầu dòng hoặc số thập phân được tuôn ra với các khối văn bản cao cấp. Dòng thứ hai của danh sách phải có cùng thụt lề như hàng đầu tiên!

Ví dụ:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

CSS chỉ cung cấp hai giá trị cho "danh sách kiểu kiểu" - bên trong và bên ngoài. Với dòng thứ hai "bên trong" được tuôn ra với các điểm danh sách không phải với dòng cao cấp:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

Chiều rộng "bên ngoài" danh sách của tôi không bị xóa với các khối văn bản cao cấp nữa.

Các thử nghiệm độ rộng văn bản thụt lề, đệm bên trái và lề trái cho các danh sách không có thứ tự nhưng chúng không thành công cho các danh sách theo thứ tự vì nó phụ thuộc vào số lượng ký tự của thập phân danh sách:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"11." và "12." không tuôn ra với khối văn bản ưu việt so với "3." và "4.".

Vì vậy, bí mật về danh sách được đặt hàng và thụt dòng thứ hai là ở đâu? Cảm ơn nỗ lực của bạn!

html  css  html-lists 
— hạt nhân
nguồn
1
Người dùng Pali Madra đã thêm điều này như một câu trả lời, nhưng nó đã bị xóa vì không chứa thêm thông báo. Ông nói rằng jsfiddle có thể là thứ bạn đang tìm kiếm: jsfiddle.net/palimadra/CZuXY/1
— bfavaretto
Cố gắng chỉ đặt phần đệm bên trái ...
— matzone
3
Trong trường hợp ai đó vấp phải câu hỏi này, người chỉ đang tìm kiếm "danh sách cơ bản", hãy xem câu hỏi này ( stackoverflow.com/questions/17556496/ Lỗi ) và Natasha Banegas trả lời.
— SunnyRed
Không một câu trả lời duy nhất giải quyết câu hỏi thực tế. Câu hỏi thực tế là làm thế nào để căn lề trái các chữ số trong danh sách, trong khi căn chỉnh trái văn bản của mục danh sách với văn bản mục bên trên nó khi văn bản đó tràn sang dòng thứ hai hoặc tiếp theo. Theo mặc định - và trong hầu hết mọi câu trả lời - các chữ số của danh sách được căn phải và văn bản của các mục trong danh sách được căn trái.
— Jessie Westlake

Câu trả lời:

267

Cập nhật

Câu trả lời này đã lỗi thời. Bạn có thể làm điều này đơn giản hơn rất nhiều, như được chỉ ra trong một câu trả lời khác dưới đây:

ul {
  list-style-position: outside;
}

Xem https://www.w3schools.com/cssref/pr_list-style-poseition.asp

Câu trả lời gốc

Tôi ngạc nhiên khi thấy điều này chưa được giải quyết. Bạn có thể sử dụng thuật toán bố trí bảng của trình duyệt (không sử dụng bảng) như thế này:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Bản trình diễn: http://jsfiddle.net/4rnNK/1/

nhập mô tả hình ảnh ở đây

Để làm cho nó hoạt động trong IE8, hãy sử dụng :beforeký hiệu kế thừa với một dấu hai chấm.

— người dùng123444555621
nguồn
2
@Perelli foochỉ là một chuỗi tùy ý (id), nó được sử dụng để kết nối counter-reset, counter-incrementvà counter()tài sản.
— dùng123444555621
3
Bạn cũng có thể tránh các công cụ bảng mạnh bằng cách sử dụng position: relativetrên <li>và position: absolutetrên nội dung được tạo. Xem jsfiddle.net/mary thẩmead / kgr4k để biết ví dụ.
— maryonomead
2
@mary thẩm quyền Tại sao 40px? Điều đó sẽ phá vỡ khi các quầy rộng hơn đó . Điểm chung của việc sử dụng bố trí bảng là trình duyệt sẽ tự động phù hợp với nội dung.
— user123444555621
5
Đẹp, nhưng làm thế nào để bạn kiểm soát <li> lề dưới? Chiều cao của <li> chỉ được xác định bởi chiều cao của các thành phần ô trong bảng. Do đó, lề, phần đệm và chiều cao trên các phần tử đó không có hiệu lực. Làm thế nào để làm việc xung quanh giới hạn này?
— hschmieder
3
Nếu bạn có các mục danh sách nhiều dòng và cần khoảng cách dọc nhất quán, giải pháp là thêm khoảng cách viền dọc vào bộ chọn ol, ví dụ: khoảng cách viền: 0 3px; Đệm thông thường trên ô bảng không hoạt động vì số luôn chỉ là một dòng.
— RemBem
207

Tôi tin rằng điều này sẽ làm những gì bạn đang tìm kiếm.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

Mã thông báo: https://jsfiddle.net/dzbos70f/

nhập mô tả hình ảnh ở đây

— JTOrlando
nguồn
21
tốt hơn nếu bạn cũng thêm padding-left: 1em;
— Bence Gacsályi
16
Đây là câu trả lời tốt nhất cho tất cả các giải pháp trong trang này. Nó thuận tiện hơn nhiều so với những người khác. Nếu bạn đang do dự với câu trả lời nào để chọn, hãy chọn câu trả lời này.
— Valentin Mercier
25
@loremmonkey Đây là một cách nhanh chóng và bẩn thỉu nhưng không phải là một giải pháp thực sự. Đầu tiên, 1emkhông bằng không gian của vết lõm. Các dòng sẽ không căn chỉnh hoàn hảo pixel-khôn ngoan. Thứ hai, những gì về khi danh sách đạt đến số 10? 100? Văn bản thụt lề sẽ không hoạt động, nó sẽ không được căn chỉnh. Câu trả lời này nên được bình chọn xuống.
— Nắng
1
@Sunny Đó là danh sách đĩa không phải là số được đánh số, vậy tại sao lại đếm đến 100? Tôi thấy không có vấn đề gì với danh sách của tôi bằng cách sử dụng mã ở trên.
— khỉ lorem
2
@loremmonkey Không thụt lề 1em. oi60.tinypic.com/a0eyvs.jpg Mục danh sách đầu tiên sử dụng kỹ thuật thụt lề văn bản ở trên. So với giao diện bình thường với vị trí kiểu danh sách: bên ngoài nó bị căn chỉnh, bị tắt bởi một pixel trong trường hợp này.
— Nắng
39

Cách dễ nhất và sạch nhất, không có bất kỳ hack nào, là chỉ thụt lề ul(hoặc ol), như vậy:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

Điều này cho kết quả giống như câu trả lời được chấp nhận: https://jsfiddle.net/5wxf2ayu/

Ảnh chụp màn hình:

nhập mô tả hình ảnh ở đây

— Chuck Le Mông
nguồn
1
Bạn có thể cần phải áp dụng list-style-position: outsidecho <li>.
— Alex
@Alex Bạn chỉ cần thực hiện việc này nếu bạn buộc ghi đè lên một kiểu hiện có ( developer.mozilla.org/en/docs/Web/CSS/list-style-poseition ).
— Chuck Le Mông
25

Kiểm tra câu đố này:

http://jsfiddle.net/K6bLp/

Nó chỉ ra cách tự thụt lề ul và ol bằng CSS.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

Ngoài ra tôi đã chỉnh sửa fiddle của bạn

http://jsfiddle.net/j7MEd/3/

Hãy ghi chú lại.

— Deepan Babu
nguồn
cảm ơn bạn, nó hoạt động rất tốt cho UL và cho OL lên đến 9 mục danh sách. Đây là vấn đề chính mà tôi đã mô tả trong câu hỏi của mình về chiều rộng 11/12. Trong ví dụ của tôi ở trên, tôi chạy một kỹ thuật khác để vấn đề trông khác đi nhưng cốt lõi của vấn đề vẫn giữ nguyên: Có một sự khác biệt nếu điểm danh sách thập phân của tôi có một hoặc hai hoặc nhiều số - ví dụ 1., 11. hoặc 111.! Tôi thấy không có điểm nào mà tôi có thể phản ứng thông qua CSS và điều chỉnh thụt lề văn bản và lề trái với số lượng.
— kernfrucht
Đối với dòng thứ hai thụt vào ol (hơn một chữ số), tôi nghĩ CSS sẽ không giải quyết được. Chúng ta chỉ nên đi cho jquery.
— Deepan Babu
Cũng lưu ý rằng typethuộc tính <ol>dường như không được dùng trong HTML 5. style="list-style-type: "Thay vào đó hãy sử dụng .
— AJ.
2
21 người của bạn có nghiêm túc không? cái này không hoạt động Không chắc chắn nếu bạn thay đổi mã của bạn kể từ khi bạn đăng.
— JGallardo
9

Bạn có thể đặt lề và phần đệm của một olhoặc ultrong CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— năm 2012
nguồn
thật không may, vấn đề không được giải quyết bằng giải pháp này: các dòng thứ hai được tuôn ra với các điểm danh sách không làm rộng hàng vượt trội, xem ví dụ ở trên
— kernfrucht
11 và 12 trong jsfiddle.net/j7MEd/1 xếp hàng với các đoạn trên cùng và dưới cùng và tôi đã không thay đổi mã. Tui bỏ lỡ điều gì vậy?
— luke2012
không, đó không phải là vấn đề Vấn đề chính là dòng thứ hai (và thứ ba, v.v ...) của mỗi điểm danh sách không có cùng "thụt lề" như dòng đầu tiên! (xem ví dụ jsfiddle). Trong câu hỏi của tôi ở trên, tôi nghĩ về một cách giải quyết với phần đệm, lề vv nhưng nó chỉ hoạt động cho các danh sách không được sắp xếp. Trên danh sách đặt hàng các vấn đề mới như thế này 11/12 điều xảy ra. Vì vậy, câu hỏi chính của tôi là: Làm thế nào tôi có thể có được thứ thụt lề (như tôi trình bày trong ví dụ đầu tiên về chứng ứ mật của mình) được thực hiện cho các danh sách được sắp xếp mà không gặp vấn đề như điều 11/12.
— kernfrucht
Ok xin lỗi có ya! Đây là một cách .. chỉ có vấn đề là để đạt được trình duyệt chéo, bạn sẽ cần đặt lề trong IE và phần đệm trong Firefox. jsfiddle.net/j7MEd/2
— luke2012
7

Tôi tin rằng bạn chỉ cần đặt danh sách 'viên đạn' bên ngoài phần đệm.

li {
    list-style-position: outside;
    padding-left: 1em;
}
— Được biết màu
nguồn
6

Bạn có thể sử dụng CSS để chọn một phạm vi; trong trường hợp này, bạn muốn liệt kê các mục 1-9:

ol li:nth-child(n+1):nth-child(-n+9)

Sau đó điều chỉnh tỷ suất lợi nhuận trên các mục đầu tiên một cách thích hợp:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

Xem nó trong hành động ở đây: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

— LaFaucon
nguồn
5

CSS sau đây đã thực hiện thủ thuật:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
— bệnh hoạn
nguồn
4

giải pháp của tôi khá giống với giải pháp của Pumbaa80 , nhưng tôi đề nghị sử dụng display: tablethay vì display:table-rowcho liphần tử. Vì vậy, nó sẽ là một cái gì đó như thế này:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

Vì vậy, bây giờ chúng ta có thể sử dụng lề cho khoảng cách giữa licác

— Alex
nguồn
1

Bản thân tôi khá thích giải pháp này:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}
— Corey Ballou
nguồn
chỉ vấn đề kích thước phông chữ
— atilkan
0

Danh sách ol, ul sẽ hoạt động nếu bạn muốn, bạn cũng có thể sử dụng bảng có viền: không có trong css.

— Casualbot
nguồn
tôi nghĩ rằng đây không phải là một giải pháp tốt liên quan đến các quy tắc ngữ nghĩa
— kernfrucht
0

CSS chỉ cung cấp hai giá trị cho "danh sách kiểu kiểu" - bên trong và bên ngoài. Với dòng thứ hai "bên trong" được tuôn ra với các điểm danh sách không phải với dòng cao cấp:

Trong danh sách theo thứ tự, không có sự can thiệp, nếu bạn đưa "vị trí kiểu danh sách" giá trị "bên trong", dòng thứ hai của một mục danh sách dài sẽ không có thụt lề, nhưng sẽ quay trở lại cạnh trái của danh sách (nghĩa là sẽ căn trái với số lượng của mặt hàng). Đây là đặc thù của danh sách theo thứ tự và không xảy ra trong danh sách không có thứ tự.

Thay vào đó, nếu bạn đưa ra "list-style-location" giá trị "bên ngoài", dòng thứ hai sẽ có cùng thụt lề như dòng đầu tiên.

Tôi đã có một danh sách với một biên giới và có vấn đề này. Với "list-style-location" được đặt thành "bên trong", danh sách của tôi không giống như tôi muốn. Nhưng với "danh sách kiểu vị trí" được đặt thành "bên ngoài", số lượng các mục trong danh sách nằm ngoài hộp.

Tôi đã giải quyết điều này bằng cách đơn giản là đặt lề trái rộng hơn cho toàn bộ danh sách, điều này đã đẩy toàn bộ danh sách về phía bên phải, trở lại vị trí trước đó.

CSS:

ol.groupname {lề: 0; padding: 0;}

ol.groupname li {lề: 0,5em 0 0 0; padding-left: 0; list-style-location: bên ngoài;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
— Chris
nguồn
-1

Ok, tôi đã quay lại và tìm ra một số điều. Đây là một GIẢI PHÁP ROUGH cho những gì tôi đã đề xuất, nhưng nó có vẻ là chức năng.

Đầu tiên, tôi làm cho các số một loạt các danh sách không có thứ tự. Một danh sách không có thứ tự thường sẽ có một đĩa ở đầu mỗi mục danh sách (

  • ) vì vậy bạn phải đặt CSS thành kiểu danh sách: none;

    Sau đó, tôi thực hiện hiển thị toàn bộ danh sách: bảng-hàng. Ở đây, tại sao tôi không dán mã cho bạn thay vì viết về nó?

    <html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

    CSS:

    ul li{
list-style: none;
display: table-row;
text-align: right;

    }

    div {
float: left;
display: inline-block;
margin: 0.2em;

    }

    Điều này dường như sắp xếp văn bản trong div thứ 2 với các số trong danh sách được sắp xếp trong div đầu tiên. Tôi đã bao quanh cả danh sách và văn bản bằng một thẻ để tôi có thể chỉ cho tất cả các div hiển thị dưới dạng các khối nội tuyến. Điều này xếp chúng lên độc đáo.

    Lề là ở đó để đặt một khoảng cách giữa thời gian và bắt đầu của văn bản. Mặt khác, chúng chạy thẳng lên nhau và nó trông như chướng mắt.

    Chủ nhân của tôi muốn văn bản bao quanh (đối với các mục nhập thư mục dài hơn) để xếp hàng với phần đầu của dòng đầu tiên, không phải lề trái. Ban đầu tôi lo lắng với một lề dương và một văn bản thụt lề, nhưng sau đó tôi nhận ra rằng khi tôi chuyển sang hai div khác nhau, điều này có tác dụng làm cho nó sao cho văn bản được xếp thành hàng vì lề trái của div là lề nơi văn bản tự nhiên bắt đầu. Vì vậy, tất cả những gì tôi cần là một lề 0,2em để thêm không gian và mọi thứ khác xếp thành hàng bơi.

    Tôi hy vọng điều này sẽ giúp nếu OP gặp vấn đề tương tự ... Tôi đã có một khoảng thời gian khó khăn để hiểu anh ấy / cô ấy.

    • — David
    nguồn
    -1

    Tôi gặp vấn đề tương tự và bắt đầu sử dụng câu trả lời của user123444555621 . Tuy nhiên, tôi cũng cần thêm paddingvà thêm bordervào từng licái, giải pháp đó không cho phép vì mỗi cái lilà một table-row.

    Đầu tiên, chúng tôi sử dụng một counterđể sao chép olsố của.

    Sau đó chúng tôi đặt display: table;trên mỗi livà display: table-celltrên :befoređể cung cấp cho chúng tôi thụt lề.

    Cuối cùng, phần khó khăn. Vì chúng tôi không sử dụng bố trí bảng cho toàn bộ, olchúng tôi cần đảm bảo mỗi :beforechiều rộng như nhau. Chúng ta có thể sử dụng chđơn vị để giữ khoảng rộng bằng với số lượng ký tự. Để giữ cho độ rộng đồng nhất khi số chữ số của :before's khác nhau, chúng tôi có thể thực hiện các truy vấn số lượng . Giả sử bạn biết danh sách của mình sẽ không có 100 mục trở lên, bạn chỉ cần một quy tắc truy vấn số lượng để yêu :beforecầu thay đổi độ rộng của nó, nhưng bạn có thể dễ dàng thêm nhiều mục khác.

    ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}
    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>
    Mở rộng đoạn trích

    — Jacob Alvarez
    nguồn
    Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
    Licensed under cc by-sa 3.0 with attribution required.