전체를 채우기 위해 태그 늘리기
다음은 간단한 메뉴 구조입니다.
<ul id="menu">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Test</a></li>
</ul>
내가 원하는 <a>그것은 전체를 채우도록 뻗어 수 <li>. 나는 같은 것을 사용해 보았지만 width: 100%; height: 100%효과가 없었습니다. 앵커 태그를 올바르게 늘리려면 어떻게합니까?
"a"태그는 인라인 레벨 요소입니다. 인라인 레벨 요소는 너비를 설정할 수 없습니다. 왜? 인라인 레벨 요소는 이론적으로 한 줄에서 다음 줄로 줄 바꿈 할 수있는 맞춤 텍스트를 나타 내기위한 것입니다. 이러한 종류의 경우 요소의 너비를 제공하는 것은 의미가 없습니다. 그 이유는 래핑할지 여부를 반드시 알 필요가 없기 때문입니다. 너비를 설정하려면 표시 속성을 block, 또는 inline-block다음으로 변경해야합니다 .
a.wide {
display:block;
}
...
<ul id="menu">
<li><a class="wide" href="javascript:;">Home</a></li>
<li><a class="wide" href="javascript:;">Test</a></li>
</ul>
메모리가 제공되는 경우 IE6의 특정 인라인 수준 요소에 너비를 설정할 수 있습니다 . 그러나 이는 IE6가 CSS를 잘못 구현하고 혼란스러워하기 때문입니다.
A를 다음과 같이 스타일링하십시오 display:block;.
ul#menu li a { display: block;}
display:flex
HTML5 방식입니다.
프레임 워크 버튼 또는 기타 요소를 해킹하는 데 유용하지만 먼저 패딩을 제거하고 원하는 높이로 설정해야 할 수 있습니다.
이 경우 "표준"웹 사이트 탐색으로 작동하도록하기에는 다소 까다로운 각도 재질 탭이 있습니다.
탭에 들어가 자마자 포인터가 변경됩니다. 이제 <a>가 부모 치수에 맞게 늘어납니다.
주제에서 벗어나 "큰 표면"에서도 흠이없는 앵귤러 머티리얼이 파급 효과를 어떻게 표시하는지 확인하십시오.
.md-header{
/* THIS IS A CUSTOM HEIGHT */
height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */
}
md-tab{
padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */
}
a{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
2018 업데이트
AngularJS Material 은 버튼 요소에 flex를 사용할 때 (부드러운) 경고를 던지므로 모든 HTML 요소 / 태그가 display:flex적절하게 처리 할 수 있다고 가정 하거나 브라우저에서 동일한 동작을 수행한다고 가정하지 마십시오 .
특정 브라우저에서 예상치 못한 동작이 발생하는 경우 flexbugs 를 참조하십시오 .
다른 접근 방식 :
<ul>
<li>
<a></a>
<img>
<morestuff>TEXTEXTEXT</morestuff>
</li>
</ul>
a {
position: absolute;
top: 0;
left: 0;
z-index: [higher than anything else inside parent]
width:100%;
height: 100%;
}
이는 링크의 컨테이너에 이미지 등이 포함되어 있거나 이미지 / 콘텐츠 크기에 따라 잠재적으로 다른 크기 인 경우에 유용합니다. 이를 통해 앵커 태그 자체가 비어있을 수 있으며 원하는대로 앵커의 컨테이너 내부에 다른 요소를 배열 할 수 있습니다. 앵커는 항상 상위의 크기와 일치하며 전체를 li클릭 할 수 있도록 맨 위에 표시 됩니다.
이 코드를 사용하여 너비 와 높이를 100 % 채웠습니다.
HTML
<ul>
<li>
<a>I need to fill 100% width and height!</a>
</li>
<ul>
CSS
li a {
display: block;
height: 100%; /* Missing from other answers */
}
Just changing the display property to block didn't work for me. I removed the padding of li and set the same padding for a.
li a {
display:block;
padding: 4px 8px;
}
<!doctype html>
<html>
<head>
<style type="text/css">
#wide li a {
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Test</a></li>
</ul>
</body>
</html>
You should try to avoid using a class on every tag so your content remains easy to maintain.
Use line-height and text-indent instead of padding for li element, and use display: block; for anchor tag
I wanted this functionality only on tab view i.e below 720px, so in media query I made:
@media(max-width:720px){
a{
display:block;
width:100%;
}
}
If your <li>s had to have a specific height then your <a>s would only stretch to the <li>'s width and not the height anymore. One way I solve this is to use CSS display:block and add paddings to my <a>s OR wrap the <a>s around the <li>s
<ul id="menu">
<a href="javascript:;"><li>Home</li></a>
<a href="javascript:;"><li>Test</li></a>
</ul>
참고URL : https://stackoverflow.com/questions/3264370/stretching-a-tag-to-fill-entire-li
'code' 카테고리의 다른 글
| 주, 월, 분기 및 연도 측면에서 날짜 간의 차이를 가져옵니다. (0) | 2020.12.07 |
|---|---|
| SQL Server 2005의 VARBINARY 필드 크기 (0) | 2020.12.07 |
| std :: shared_ptr을 다운 캐스트하는 방법은 무엇입니까? (0) | 2020.12.07 |
| Backbone의 모델을 초기 기본값으로 재설정하는 가장 쉬운 방법은 무엇입니까? (0) | 2020.12.07 |
| android-프로그래밍 방식으로 LayoutParams 설정 (0) | 2020.12.07 |