UL listesinin tek bir satıra biçimlendirilmesi

126

Bu listeyi tek satırda işlemek istiyorum.

Liste öğesi1
Liste öğesi2

Olarak gösterilmelidir

* Liste öğesi2 * Liste öğesi2

Hangi CSS stilini kullanmalı?

css

— RD
kaynak

Bu sorunun önyüklemeye özgü olmadığını biliyorum, ancak önyükleme küçük resimlerinin yatay metin, resim, video vb. Listesi için çok yararlı olduğunu buldum .

— Anupam

184

ul li{
  display: inline;
}

Daha fazla bilgi için temel liste seçeneklerine ve listamatic'teki temel yatay listeye bakın. ( bağlantılar için aşağıdaki Daniel Straight'e teşekkürler ).

Ayrıca, yorumlarda da belirtildiği gibi, muhtemelen ul üzerinde stil oluşturmak ve işlerin güzel görünmesini sağlamak için li'lerin ve li'lerin kendilerinin içine giren her öğe olmasını istersiniz.

— rz.
kaynak

7

Bu işi hallederken, öğeleri güzelce yerleştirmek için biraz dolgu eklemek isteyeceksiniz

— Rob Allen

1

doğru, bu sadece listeyi yatay hale getirir. Her şeyin güzel görünmesi için ul, li ve li'ye ne olursa olsun biraz daha fazla stil eklemek istersiniz.

— rz.

1

Mermilerin kalması nasıl sağlanır? Ya da başka bir şekilde mermi kullanabilir miyiz?

— RD

1

@DotDot'un belirttiği gibi: {display: inline} kullanmak madde işareti stilini kaldırır. Bunun üstesinden gelin: 1. Onun yerine {float: left} kullanın (yine de IE9 üzerinde çalışmıyor). 2. Bir sol dolgu ekleyin ve bir arka plan görüntüsü ekleyin (bu, arka plan görüntüsü olarak madde işaretidir).

— Adrien Be

26

Modern tarayıcılarda aşağıdakileri yapabilirsiniz (CSS3 uyumlu)

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>

Snippet'i genişlet

— davidlbaileysr
kaynak

15

HTML Kodu:

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

CSS kodu:

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

— adel aaji
kaynak

9

Bunun gibi bir şeyi de denemeyi deneyin:

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;
 }
 */

Göstermek için bir kod parçası yaptım: http://codepen.io/agm1984/pen/mOxaEM

— agm1984
kaynak

0

içinde önyükleme kullanımı .list-inlinecss sınıfa

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

Referans: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h

— Matee Gojra
kaynak