วิธีจัดรูปแบบรายการ UL ให้เป็นบรรทัดเดียว

ฉันต้องการแสดงรายการนี้เป็นบรรทัดเดียว

• รายการ 1
• รายการ 2

ควรแสดงเป็น

* รายการรายการ 2 * รายการ 2

CSS สไตล์ใดที่จะใช้?

ul li{
  display: inline;
}

สำหรับข้อมูลเพิ่มเติมโปรดดูตัวเลือกรายการพื้นฐาน และรายการแนวนอนพื้นฐานที่ listamatic (ขอบคุณDaniel Straightด้านล่างสำหรับลิงค์)

นอกจากนี้ตามที่ระบุไว้ในความคิดเห็นคุณอาจต้องการจัดแต่งทรงผมให้กับ ul และองค์ประกอบใด ๆ ที่อยู่ในตัวของลีและตัวของลีเองเพื่อให้สิ่งต่างๆดูดี

ในเบราว์เซอร์สมัยใหม่คุณสามารถทำสิ่งต่อไปนี้ได้ (สอดคล้องกับ 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>

รหัส HTML:

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

โค้ด CSS:

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

ลองทดลองสิ่งนี้ด้วย:

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

ฉันสร้าง codepen เพื่อแสดง: http://codepen.io/agm1984/pen/mOxaEM

ในbootstrapใช้.list-inlineคลาส css

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

อ้างอิง: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_txt_list-inline&stacked=h