CSS: Kiểm soát không gian giữa dấu đầu dòng và <li>

Tôi muốn kiểm soát không gian ngang của một viên đạn đẩy nó <li>sang phải trong một <ol>hoặc <ul>.

Đó là, thay vì luôn luôn có

*  Some list text goes
   here.

Tôi muốn có thể thay đổi điều đó thành

*         Some list text goes
          here.

hoặc là

*Some list text goes
 here.

Tôi nhìn xung quanh nhưng chỉ có thể tìm thấy hướng dẫn để chuyển toàn bộ khối sang trái hoặc phải, ví dụ: http://www.alistapart.com/articles/taminglists/

Đặt nội dung của nó trong một spanvị trí tương đối, sau đó bạn có thể kiểm soát không gian bằng thuộc lefttính của span.

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

Để tóm tắt các câu trả lời khác tại đây - nếu bạn muốn kiểm soát tốt hơn khoảng trống giữa đạn và văn bản trong một <li>mục danh sách, các tùy chọn của bạn là:

(1) Sử dụng hình nền:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

Ưu điểm:

• Bạn có thể sử dụng bất kỳ hình ảnh nào bạn muốn cho viên đạn
• Bạn có thể sử dụng CSS background-positionđể định vị hình ảnh khá nhiều ở bất cứ đâu bạn muốn liên quan đến văn bản, sử dụng pixel, ems hoặc%

Nhược điểm:

• Thêm một tệp hình ảnh (mặc dù nhỏ) vào trang của bạn, tăng trọng lượng trang
• Nếu người dùng tăng kích thước văn bản trên trình duyệt của họ, viên đạn sẽ giữ nguyên kích thước ban đầu. Nó cũng có thể sẽ ra khỏi vị trí khi kích thước văn bản tăng
• Nếu bạn đang phát triển bố cục 'phản hồi' chỉ sử dụng tỷ lệ phần trăm cho chiều rộng, có thể khó có được viên đạn chính xác ở nơi bạn muốn trên phạm vi chiều rộng màn hình

2. Sử dụng phần đệm trên <li>thẻ

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

Ưu điểm:

• Không có hình ảnh = 1 tập tin ít hơn để tải xuống
• Bằng cách điều chỉnh đệm trên <li>, bạn có thể thêm càng nhiều thêm không gian ngang giữa đạn và các văn bản như bạn thích
• Nếu người dùng tăng kích thước văn bản, khoảng cách và kích thước dấu đầu dòng sẽ tỷ lệ theo tỷ lệ

Nhược điểm:

• Không thể di chuyển viên đạn gần văn bản hơn mặc định của trình duyệt
• Giới hạn về hình dạng và kích thước của các loại dấu đầu dòng tích hợp của CSS
• Bullet phải cùng màu với văn bản
• Không kiểm soát vị trí thẳng đứng của viên đạn

(3) Bọc văn bản trong một <span>yếu tố phụ

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

Ưu điểm:

• Không có hình ảnh = 1 tập tin ít hơn để tải xuống
• Bạn có nhiều quyền kiểm soát vị trí của viên đạn hơn so với tùy chọn (2) - bạn có thể di chuyển nó đến gần văn bản hơn (mặc dù tôi đã cố gắng hết sức nhưng dường như bạn không thể thay đổi vị trí dọc bằng cách thêm padding-topvào<span> . một cách giải quyết cho việc này, mặc dù ...)
• Viên đạn có thể là một màu khác với văn bản
• Nếu người dùng tăng kích thước văn bản của họ, dấu đầu dòng sẽ chia tỷ lệ (cung cấp cho bạn đặt phần đệm & lề trong phần mềm không phải px)

Nhược điểm:

• Yêu cầu một yếu tố phi thường hơn (điều này có thể sẽ khiến bạn mất nhiều bạn bè hơn so với thực tế;) nhưng thật khó chịu cho những người thích mã của họ gọn gàng và hiệu quả nhất có thể, và nó vi phạm sự tách biệt giữa cách trình bày và nội dung HTML / CSS có nghĩa vụ phải cung cấp)
• Không kiểm soát kích thước và hình dạng của viên đạn

Đây là hy vọng cho một số tính năng kiểu danh sách mới trong CSS4, vì vậy chúng tôi có thể tạo ra các viên đạn thông minh hơn mà không cần dùng đến hình ảnh hoặc đánh dấu exta :)

Điều này nên làm điều đó. Hãy chắc chắn để đặt viên đạn của bạn ra bên ngoài. bạn cũng có thể sử dụng các phần tử giả CSS nếu bạn có thể thả chúng trong IE7 xuống. Tôi thực sự không khuyên bạn nên sử dụng các yếu tố giả cho điều này nhưng nó hoạt động để kiểm soát khoảng cách.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

Câu hỏi cũ, nhưng phần tử giả trước khi hoạt động tốt ở đây.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

Nó hoạt động thực sự tốt và không yêu cầu nhiều quy tắc hoặc html.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

Chúc mừng!

Đối với kiểu danh sách: kiểu: nội tuyến :

Nó gần giống như câu trả lời của DSMann8 nhưng mã css ít hơn.

Bạn chỉ cần

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

Chúc mừng

Bạn có thể sử dụng padding-leftthuộc tính trên các mục danh sách ( không phải trên danh sách!).

Sử dụng văn bản thụt vào li hoạt động tốt nhất.

văn bản thụt lề: -x px; sẽ di chuyển viên đạn đến gần li và ngược lại.

Sử dụng tương đối trên khoảng âm trái có thể không hoạt động đúng với các phiên bản cũ hơn cho IE. PS- tránh đưa ra các vị trí càng nhiều càng tốt.

Đây là một giải pháp khác sử dụng bộ đếm css và các phần tử giả. Tôi thấy nó thanh lịch hơn vì nó không yêu cầu sử dụng thêm các lớp đánh dấu html cũng như các lớp css:

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

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

Tôi sử dụng các khoảng trắng không thể phá vỡ để khoảng cách chỉ ảnh hưởng đến dòng đầu tiên của các thành phần danh sách của tôi (nếu thành phần danh sách dài hơn một dòng). Bạn có thể sử dụng đệm ở đây để thay thế.

Câu hỏi cũ nhưng vẫn liên quan. Tôi khuyên bạn nên sử dụng tiêu cực text-indent. list-style-positionphải outside.

Ưu điểm:

• Bullet được định vị tự động đúng cách
• Thay đổi kích thước phông chữ không phá vỡ vị trí dấu đầu dòng
• Không có phần tử phụ (không có phần tử giả quá)
• Hoạt động cho cả RTL và LTR mà không thay đổi CSS.

Nhược điểm:

• thử
• đến
• tìm thấy
• một :)

Một danh sách không có thứ tự bắt đầu với thẻ ul. Mỗi mục danh sách bắt đầu bằng các mục danh sách sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen) theo mặc định:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Đầu ra:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Thuộc tính thụt văn bản chỉ định thụt dòng của dòng đầu tiên trong khối văn bản.
Lưu ý: Các giá trị âm được cho phép. Dòng đầu tiên sẽ được thụt vào bên trái nếu giá trị âm.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Dường như bạn có thể (phần nào) kiểm soát khoảng cách bằng cách sử dụng phần đệm trên thẻ <li>.

<style type="text/css">
    li { padding-left: 10px; }
</style>

Điều hấp dẫn là dường như nó không cho phép bạn xem xét kỹ lưỡng như ví dụ cuối cùng của bạn.

Vì vậy, bạn có thể thử tắt loại kiểu danh sách và sử dụng & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

Dường như có một giải pháp sạch hơn nhiều nếu bạn chỉ muốn giảm khoảng cách giữa điểm đầu dòng và văn bản:

li:before {
    content: "";
    margin-left: -0.5rem;
}

Bạn cũng có thể sử dụng thay thế hình nền thay thế, cho bạn toàn quyền kiểm soát vị trí dọc và ngang.

Xem câu trả lời cho câu hỏi này

ul
{
list-style-position:inside;
} 

Định nghĩa và cách sử dụng

Thuộc tính vị trí kiểu danh sách chỉ định nếu các điểm đánh dấu mục danh sách sẽ xuất hiện bên trong hoặc bên ngoài luồng nội dung.

Nguồn: http://www.w3schools.com/cssref/pr_list-style-poseition.asp

Bạn có thể sử dụng ul li:beforevà một hình ảnh nền, và gán position: relativevà position:absolutecho, livà li:before, tương ứng. Bằng cách này bạn có thể tạo một hình ảnh và định vị nó bất cứ nơi nào bạn muốn liên quan đến li.

Sử dụng padding-left:1em; text-indent:-1emcho <li>thẻ.
Sau đó, list-style-position: insidecho các <ul>thẻ.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

Giải pháp sau đây hoạt động tốt khi bạn muốn di chuyển văn bản đến gần dấu đầu dòng hơn và ngay cả khi bạn có nhiều dòng văn bản.

margin-right cho phép bạn di chuyển văn bản đến gần viên đạn hơn

text-indent đảm bảo rằng nhiều dòng văn bản vẫn xếp hàng chính xác

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

sử dụng <span style="display: flex;">bên trong mỗi <li>.