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 라벨 영역이 넓어졌습니다.
여기서 마치겠습니다.
Laravel6View에서 컨트롤러로 전달되는 get/post 데이터 획득 방법 모드 정리
react를 사용하여 가로 크기에 따라 다른 HTML 표시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage