티스토리 뷰

css

[css] ul li 가로 정렬

나뜨루다 2021. 4. 23. 15:32
728x90

반응형웹을 위해선 ul li로 table을 만드는걸 추천한다.

.ul {
    list-style:none;
}
.li {
    float: left;
}

 

list-style:none;  <li>앞 점 없애기 

float : left; 가로 정렬  

<!DOCTYPE html>
<html>
<head>
<style>
  .ul {
    list-style:none;
  }
  .li {
      float: left;
  }

</style>
</head>
<body>
<ul class="ul">
    <li class="li"> 1번 li　</li>
    <li class="li"> 2번 li　</li>
    <li class="li"> 3번 li　</li>
    <li class="li"> 4번 li　</li>
    <li class="li"> 5번 li　</li>
    <li class="li"> 6번 li　</li>
    <li class="li"> 7번 li　</li>
</ul>
</body>
</html>

 

style 적용 전 

 

style 적용 후 

 

저작자표시

'css' 카테고리의 다른 글

[CSS] table 넓이 고정시키기  (0) 2021.06.10
[css] overflow 사용하기 (스크롤)  (5) 2021.05.10
[css] 반응형 웹 calc()  (0) 2021.04.23
[css] 이미지위에 button 추가하기  (0) 2021.02.05
[css] 텍스트에 그라데이션 넣기  (0) 2021.01.13