[css] UL 목록을 한 줄로 스타일링하는 방법

Program / 글쓴이

이 목록을 한 줄로 렌더링하고 싶습니다.

  • 목록 item1
  • 목록 항목 2

다음과 같이 표시되어야합니다.

* 목록 항목 2 * 목록 항목 2

사용할 CSS 스타일은 무엇입니까?

답변

ul li{
  display: inline;
}

자세한 내용은 listamatic에서 기본 목록 옵션 과 기본 가로 목록 을 참조하세요. ( 링크를 위해 아래의 Daniel Straight 에게 감사드립니다 ).

또한 주석에서 지적했듯이 ul에 스타일을 지정하고 어떤 요소가 li 및 li 내부에 들어가든지 멋지게 보이도록 할 수 있습니다.

답변

최신 브라우저에서는 다음을 수행 할 수 있습니다 (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;
 }
 */

설명하기 위해 코드 펜을 만들었습니다. http://codepen.io/agm1984/pen/mOxaEM

답변

부트 스트랩 에서 .list-inlineCSS 클래스 사용

<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

답변