[CSS] inline-block : 블록 요소 가로로 정렬 및 줄 바꿈 해제하기

보통 div 태그로 묶여 있는 요소를 가로로 나란히 배치하기 위해서 display: flex를 이용해왔다. 하지만, 현재 개발중인 프로젝트는 버전이 맞지 않아서.. 사용할 수 없었다...ㅠㅠ 그래서 찾아본 결과, display: inline-block, float: left 등의 방법이 있었다. 하지만 float은 여백없이 정렬이 되어도 줄 바꿈 해제가 되지 않아서 배제하였다. 만약 줄 바꿈이 되어도 상관없다면 float을 사용하여 구현하는 것이 좋겠다!

 

728x90

 

---

 

블록 요소 가로로 정렬 및 줄 바꿈 해제하기

1. 가로로 배치하고자 하는 요소에 display: inlin-block;
2. 상위 요소에 white-space: nowrap;

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  white-space: nowrap;
}

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: skyblue;
}

 

블록 요소 하위에 텍스트가 있는 경우, 가로로 정렬하면 세로 정렬이 이상해지는 문제 해결하기

문제 원인

블록 요소 하위에 텍스트가 있는 경우 세로 정렬이 이상해진 경험이 있을 것이다. 처음엔 무엇이 문제인지 몰랐는데, inline-block의 특성 상 텍스트의 크기만큼 높이를 잡기 때문에 생긴 문제였다. 그래서 텍스트가 없는 요소와 정렬이 틀어지게 되었다.

 

문제 해결방법

1. vertical-align의 기본 속성 값인 baseline을 변경하기 위하여 top으로 설정하였다.
2. 추가적으로 블록 내 텍스트의 위치를 바꾸기 위해 line-height에 값을 설정하여 높이를 변경하였다.

<div class="container">
  hello
  <div class="box"></div>
  <div class="box">hello</div>
</div>

.container {
  white-space: nowrap;
}

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: skyblue;
  vertical-align: top; /* 코드 추가 - 1 */
  line-height: 150px;  /* 코드 추가 - 2 */
}

 

결과 화면