프론트엔드 첫걸음

[문제해결] a 태그가 width 100%를 차지해버릴 때 본문

개발 공부/CSS

[문제해결] a 태그가 width 100%를 차지해버릴 때

차정 2022. 7. 19. 12:22
 a 태그가 width 100%를 차지해버려서 a 하위요소에 준 width 가 무용지물이 될 때 
부트스트랩을 사용중이라면 하위요소의 width 관련 속성을 a 태그로 옮겨주고,
부트스트랩을 사용하지 않는다면 a태그를 p태그로 감싸주면 된다.

 

 

부트스트랩을 사용 할 때

 

부트스트랩으로 페이지를 예쁘게 3등분

 

 

 

a 태그로 감쌌더니 a 태그가 한줄을 그대로 차지해버림

 

 

하위 요소의 너비관련 class를 a 태그에 옮겨준다 

 

<a href="google.com" class="col-md-3">
  <div>안녕</div>
</a>

 

See the Pen Untitled by JEONG (@cona) on CodePen.

 

 

 

 

 

 

 

부트스트랩 없이 CSS 사용할 때 

 

부트스트랩을 사용하지 않는다면 a 태그를 p 태그로 감싸주면 된다.

 

https://stackoverflow.com/questions/30586988/how-to-make-anchor-tag-fit-to-content-not-entire-width-of-page

 

 

 

See the Pen a 태그 width조정 by JEONG (@cona) on CodePen.