Câu hỏi Các viên đạn đến từ đâu trên các phần tử
  • ?

  • Sự hiểu biết hiện tại của tôi là các phần tử HTML khác nhau được phân tách trong chức năng của chúng theo kiểu CSS mặc định, ngữ nghĩa của chúng sang một bên.

    Sử dụng CSS tùy chỉnh, bạn có thể (vô tình) làm cho bất kỳ phần tử HTML nào hoạt động giống như bất kỳ phần tử nào khác.

    Nếu điều đó đúng, điều duy nhất tôi không thể giải thích là các viên đạn trên <li> các yếu tố. CSS nào gây ra chúng? Làm thế nào bạn có thể thêm nó vào các yếu tố khác?


    Lưu ý cho người đọc trong tương lai: Gần đây tôi đã học được các phần tử HTML cũng khác nhau danh mục nội dung.


    76
    2018-05-05 20:40


    gốc


    developer.mozilla.org/en-US/docs/Web/CSS/list-style - Stickers
    Những viên đạn đến từ list-style, viết tắt của list-style-type, list-style-image và list-style-position. - Terry
    họ đang nội dung được tạo - steveax
    Cảm ơn vì tiền thưởng hào phóng của bạn, Aerovistae! Tôi thực sự đánh giá cao lòng tốt của bạn và tôi vui vì tôi có thể xóa câu hỏi của bạn lên :) Có một ngày rất tốt đẹp !! - bytecode77


    Các câu trả lời:


    Các viên đạn được chứa "bên trong" đệm của <ul> thành phần:

    Phần đệm được đánh dấu màu xanh lá cây và lề màu cam:

    1

    Giảm padding cho thấy rằng các viên đạn là "bên trong" đệm đó:

    4

    Tăng lề của <ul> ví dụ, thay đổi nó ngay.

    2

    Các list-style tài sản tự điều khiển các viên đạn. Đặt nó thành none sẽ ẩn chúng. Bạn sẽ cần đặt lề và phần đệm thành 0 nếu bạn muốn loại bỏ thụt lề quá.

    ul
    {
        list-style: none;
    }
    

    3

    Nếu bạn muốn loại bỏ tất cả các lề / điểm đệm và các dấu đầu dòng, hãy sử dụng điều này:

    ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    

    5


    Tất nhiên bạn cũng có thể áp dụng dấu đầu dòng cho các điều khiển HTML khác:

    div
    {
        padding-left: 40px;
    }
    a
    {
        display: list-item;
        list-style: disc;
    }
    <div>
        <a href="#">Item #1</a>
        <a href="#">Item #2</a>
        <a href="#">Item #3</a>
        <a href="#">Item #4</a>
    </div>


    77
    2018-05-05 20:50



    Tôi không chắc chắn câu nói "các viên đạn nằm trong đệm" có chính xác không? Điều gì sẽ xảy ra nếu bạn đặt padding thành 0 nhưng lề tới 20px? Tôi ra khỏi máy tính để bàn nên không thể tự kiểm tra. - EyasSH
    Và bạn có thể chỉ ra cách bạn sẽ THÊM viên đạn vào các nguyên tố khác, chỉ vì lợi ích của việc nắm bắt đầy đủ điều này? Giống như làm cho một div của nhịp hành xử giống như một ul của lis. - Aerovistae
    Đây là một câu trả lời vô cùng rõ ràng và tuyệt vời. Tôi sẽ trao giải thưởng này một tiền thưởng khi nó trở thành có thể. Bằng cách nào thì StackOverflow thêm đoạn trích? Đây là lần đầu tiên tôi nhìn thấy một. - Aerovistae
    kiểu danh sách kiểu bullet  không tồn tại. Bạn nên sử dụng disc . Chrome vẫn hiển thị dấu đầu dòng, nhưng Firefox thì không. - Artyom
    @Aerovistae Nội dung được tạo và giao diện mặc định là nội dung từ hệ điều hành - Nó chỉ đơn giản là một nút. Nhưng CSS có thể được áp dụng. Trình duyệt xử lý CSS và áp dụng nó cho phần tử UI. - bytecode77


    Các trình duyệt thường có một "stylesheet mặc định" - một tập hợp các kiểu CSS áp dụng cho các phần tử HTML cụ thể. Hãy nhìn vào Kiểu mặc định của Firefox, Kiểu mặc định của ChromeKiểu mặc định của IE.

    Thông thường, một <ul> thẻ có các kiểu CSS có thể ghi đè mặc định sau:

    ul {
      display: block;
      list-style-type: disc;
      margin-before: 1em; /* equivalent to margin-top in most languages */
      margin-after: 1em;  /* equivalent to margin-bottom in most languages */
      margin-start: 0px;  /* equivalent to margin-left in LTR */
      margin-end: 0px;    /* equivalent to margin-right in LTR */
      padding-start: 40px;/* equivalent to padding-left in LTR*/
    }
    
    • list-style-type: disc khiến biểu tượng đĩa xuất hiện bên cạnh mục.
    • list-style-position và list-style-image không được đặt. Mặc định của họ là outside và none, tương ứng. Điều này có nghĩa là disc biểu tượng được xác định ở trên sẽ xuất hiện trái của li yếu tố (bằng hầu hết các ngôn ngữ) và không can thiệp vào li hộp hiển thị chính nó.
    • Các margin và padding cài đặt đúng cách đặt nội dung.

    An <li> thẻ như sau:

    li {
      display: list-item;
    }
    
    • display: list-item tương tự như display: block; và cho phép các mục danh sách riêng biệt xuất hiện trên các dòng khác nhau.

    29
    2018-05-05 20:44





    Xem trang này https://css-tricks.com/almanac/properties/l/list-style/

    Các viên đạn đến từ các yếu tố ul. Bạn có thể sửa đổi chúng bằng cách sử dụng thuộc tính kiểu danh sách kiểu hoặc danh sách kiểu-hình ảnh


    5
    2018-05-05 20:46





    Các viên đạn tròn cho <li> các phần tử chỉ là mặc định của trình duyệt. Cũng giống như nó có phông chữ mặc định, phông chữ, gạch chân cho các liên kết (màu xanh), v.v. Để đảm bảo bạn ghi đè lên mặc định của trình duyệt, hãy sử dụng một số thiết lập lại css http://cssreset.com/ hoặc css bootstrap.

    Phong cách cho <li> được xác định bởi <ul> hoặc là <ol> làm nó ngơ ngác. ví dụ

    ul.circle {list-style-type: circle;}
    ul.square {list-style-type: square;}
    ol.upper-roman {list-style-type: upper-roman;}
    ol.lower-alpha {list-style-type: lower-alpha;} 
    ul.image{ list-style-image: url("//cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6");} 
    ul.singleline { display:flex; list-style:none; } // css3 only
    <ul class="circle">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ul class="square">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ol class="upper-roman">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
    <ol class="lower-alpha">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
    <ul class="image">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ul class="singleline">
        <li>One </li>
        <li>Two </li>
        <li>Three </li>
    </ul>


    5
    2018-05-05 20:47





    Tôi nghĩ câu hỏi ban đầu thực sự là, "làm cách nào tôi có thể thêm dấu đầu dòng vào các phần tử KHÁC, vì CSS được cho phép bạn tạo kiểu cho bất kỳ thứ gì (như phần tử p) trông giống như cái gì khác (như LI).

    Câu trả lời có vẻ là, LI là một trường hợp đặc biệt, AFAIK. Có thể sai. Tôi đã thử thêm <style="display: list-item; list-style-type:disc;"> trên <p> và không nhận được đạn. (Chỉ được thử nghiệm với Chrome).

    Bạn thực sự có thể thêm ký tự dấu đầu dòng (&bull;) theo cách thủ công hoặc lập trình để bắt đầu từng phần tử p và đặt lề và đệm để trông giống như một khối UL / LI, tôi đoán vậy.


    3
    2018-05-05 21:29



    Nó không phải là quá nhiều mà LI là một trường hợp đặc biệt, nhưng phong cách danh sách được xác định bởi danh sách phụ huynh chứ không phải là mục danh sách. Bạn cần phải có một display: unordered-list; tài sản có sẵn cho phụ huynh của đoạn văn để nhận được dấu đầu dòng (hoặc một ordered-list để có được autonumbering). - Stan Rogers
    Bạn đã thêm bất kỳ phần đệm nào vào <p> yếu tố? Một câu trả lời khác đề cập rằng nếu bạn hạ thấp phần đệm đủ <li> các yếu tố, viên đạn biến mất. - Mitchell Carroll
    Các cha mẹ của <p> yếu tố bạn đã thử nghiệm này trên nên đã nhận được list-style-type: disc;, không phải <p> chính yếu tố. Các <p> phần tử chỉ nên nhận: display: list-item;. - EyasSH
    không nhận được đạn - những viên đạn có thể ở bên trái màn hình. Thử thêm phần đệm hoặc lề trái. - Salman A


    Các dấu đầu dòng trên các mục danh sách là một ví dụ về nội dung được tạo. Các ví dụ khác về nội dung được tạo bao gồm các số trong danh sách được sắp xếp, bộ đếm CSS và :before và :after các phần tử giả.

    CSS nào gây ra chúng?

    Cài đặt display: list-item trên một phần tử sẽ làm cho nó hiển thị các viên đạn. Bạn có thể thay đổi diện mạo và vị trí quá.

    Làm thế nào bạn có thể thêm nó vào các yếu tố khác?

    Xem ví dụ bên dưới:

    .mylist.type1 > span {
      display: list-item;
      /* inside: the marker is placed inside the element box before its content */
      list-style-position: inside;
    }
    .mylist.type2 > span {
      display: list-item;
      /* outside (default): the marker is placed outside the element box towards left */
      /* by the way you are not restricted to just bullets */
      list-style-type: lower-roman;
    }
    .mylist.type2 {
      /* add some room on left for bullets positioned outside */
      padding-left: 2em;
    }
    <div class="mylist type1">
      <span>Item 1</span>
      <span>Item 2</span>
      <span>Item 3</span>
    </div>
    <hr>
    <div class="mylist type2">
      <span>Item 1</span>
      <span>Item 2</span>
      <span>Item 3</span>
    </div>

    Để kiểm soát chính xác hơn, tôi khuyên bạn nên sử dụng các phần tử giả (và các bộ đếm CSS nếu bạn muốn đếm).


    2
    2018-05-12 12:54