css 에서 parent 요소의 width 만큼 자식 요소의 크기를 지정하려면 어떻게 해야 하나요??

Question

css 에서 parent 요소의 width 만큼 자식 요소의 크기를 지정하려면 어떻게 해야 하나요??

예를 들면 아래와 같은 경우 a node 가 li node 만큼의 크기를 가지길 원합니다.

어떻게 처리해야 하나요??

<li class="list-text"><a href="/go_url" class="">이동 하는 URL</a></li>

참고로 현재는 "이동 하는 URL" 이라는 text 크기 만큼만 a node 가 차지하는 중입니다.

Answer 1

CSS의 display 속성을 이용하시면 됩니다.

li 태그의 자식요소인 a 태그는 inline 요소로 컨텐츠의 너비 만큼만 요소의 너비가 적용됩니다.

a 태그의 display 속성을 block 으로 바꿔주시면 li 태그의 영역 만큼의 크기를 가질 수 있습니다.

css 파일에서 수정하는 경우

.list-text a {display: block}

태그에 직접 작성하는 경우

<li class="list-text"><a href="/go_url" class="" style="display: block">이동 하는 URL</a></li>

Answer 2

안녕하세요

방법은 여러가지가 있는데 첫번째는 a의 display를 block으로 주는 것입니다. 그러면 li만큼 칸이 늘어날 것입니다.

두번째로는 li의 width를 js에서 탐지해서 크기가 변할때마다 a의 속성값으로 직접 넣어주는 방법도 있습니다.

마지막 방법으로는 좀 더 확장된 Css 버전이라고 볼 수 있는SCSS를 사용하는 것도 있습니다.

Answer 3

안녕하세요.

a 태그를 li에 맞추는 샘플인데 css 에 설정한 거에 따라 조금 다를 수 있습니다.

li에 padding 값이 있는 경우에는 padding을 제외하고 100% 맞춰집니다.

a {display: inline-block; width: 100%; height: 100%;}