Cách định dạng danh sách UL thành một dòng

126

Tôi muốn hiển thị danh sách này trong một dòng duy nhất.

Liệt kê mục 1
Liệt kê lặp 2

Nên được hiển thị như

* Danh sách item2 * Danh sách item2

Kiểu CSS nào để sử dụng?

css

— RD
nguồn

Tôi biết câu hỏi này là không cụ thể cho bootstrap nhưng tôi thấy bootstrap thumbnails là rất hữu ích cho các danh sách theo chiều ngang của văn bản, hình ảnh, video, vv

— Anupam

184

ul li{
  display: inline;
}

Để biết thêm, hãy xem các tùy chọn danh sách cơ bản và danh sách ngang cơ bản tại listamatic. (cảm ơn Daniel Straight dưới đây cho các liên kết).

Ngoài ra, như đã chỉ ra trong các bình luận, bạn có thể muốn tạo kiểu trên ul và bất kỳ yếu tố nào bên trong bản thân chữ li và chữ li để mọi thứ trông đẹp mắt.

— rz.
nguồn

7

Trong khi điều này được công việc làm, bạn cũng sẽ muốn bao gồm một số padding để giữ các yếu tố cách nhau độc đáo

— Rob Allen

1

đúng, điều này chỉ làm cho danh sách nằm ngang. bạn có thể muốn thêm một chút kiểu dáng cho ul, li và bất cứ thứ gì trong li để làm cho mọi thứ trông đẹp hơn.

— rz.

1

Làm sao để đạn ở lại? Hoặc chúng ta có thể gạch đầu dòng bằng một số cách khác.

— RD

1

như @DotDot đã chỉ ra: việc sử dụng {display: inline} sẽ xóa kiểu dấu đầu dòng. Giải quyết vấn đề này là: 1. sử dụng {float: left} để thay thế (mặc dù không hoạt động trên IE9). 2. thêm phần đệm bên trái & thêm hình nền (đó là dấu đầu dòng làm hình nền).

— Adrien Be

26

Trong các trình duyệt hiện đại, bạn có thể làm như sau (tuân thủ CSS3)

ul
{
  display:flex;  
  list-style:none;
}

<ul>
  <li><a href="">Item1</a></li>
  <li><a href="">Item2</a></li>
  <li><a href="">Item3</a></li>
</ul>

Mở rộng đoạn mã

— davidlbaileysr
nguồn

15

Mã HTML:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Mã CSS:

ul.list li{
  width: auto;
  float: left;
}

— adel aaji
nguồn

9

Hãy thử thử nghiệm với những thứ tương tự như sau:

HTML

 <ul class="inlineList">
   <li>She</li>
   <li>Needs</li>
   <li>More Padding, Captain!</li>
 </ul>

CSS

 .inlineList {
   display: flex;
   flex-direction: row;
   /* Below sets up your display method: flex-start|flex-end|space-between|space-around */
   justify-content: flex-start; 
   /* Below removes bullets and cleans white-space */
   list-style: none;
   padding: 0;
   /* Bonus: forces no word-wrap */
   white-space: nowrap;
 }
 /* Here, I got you started.
 li {
   padding-top: 50px;
   padding-bottom: 50px;
   padding-left: 50px;
   padding-right: 50px;
 }
 */

Tôi đã tạo một codepen để minh họa: http://codepen.io/agm1984/pen/mOxaEM

— agm1984
nguồn

0

trong bootstrap sử dụng .list-inlinelớp css

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Tham khảo: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h

— Matee Gojra
nguồn