a Tip for HTML/li 태그 내의 a 태그 영역이 확장되지 않을 경우 해당

3738 단어 HTML

문제:li 탭의 a 탭 영역이 확장되지 않음


<body style="margin: 2rem;">
    <ul style="position: relative; display: flex; text-align: center; justify-content: space-around; list-style: none;">
        <li style="flex: 1 1 30%;"><a style="background: chartreuse; width: 100%" href="#">a</a></li>
        <li style="flex: 1 1 30%;"><a style="background: chartreuse;  width: 100%" href="#">a</a></li>
    </ul>
</body>

지원:li에position:relative,top:0 추가;left:0;width: 90%;height: 100%;display: block;a에 추가

<body style="margin: 2rem;">
        <ul style="position: relative; display: flex; text-align: center; justify-content: space-around; list-style: none;">
            <li style="flex: 1 1 30%;position: relative;"><a style="background: chartreuse; top: 0;left:0;width: 90%;height: 100%;display: block; " href="#">a</a></li>
            <li style="flex: 1 1 30%;position: relative;"><a style="background: chartreuse; top: 0;left:0;width: 90%;height: 100%;display: block;" href="#">a</a></li>
            <!--width:100%だと描画されない <li style="flex: 1 1 30%;position: relative;"><a style="background: chartreuse; top: 0;left:0;width: 100%;height: 100%;display: block;" href="#">a</a></li> -->
            <!--width:100%だと描画されない <li style="flex: 1 1 30%;position: relative;"><a style="background: chartreuse; top: 0;left:0;width: 100%;height: 100%;display: block;" href="#">a</a></li> -->

        </ul>
</body>

이때 a라벨의width:100%가 그려지지 않기 때문에 90%로 설정합니다.

현재, 리 라벨의 a 라벨 영역이 넓어졌습니다.
여기서 마치겠습니다.

좋은 웹페이지 즐겨찾기