CSS
인라인 블록 레이아웃
수색…
양쪽 맞춤 바
수평으로 정렬 된 탐색 (메뉴) 막대에는 몇 가지 항목이 정당화되어야합니다. 첫 번째 (왼쪽) 항목에는 컨테이너 내에 왼쪽 여백이없고 마지막 (오른쪽) 항목에는 컨테이너 내에 오른쪽 여백이 없습니다. 항목 간 거리는 항목 폭에 관계없이 동일합니다.
HTML
<nav>
<ul>
<li>abc</li>
<li>abcdefghijkl</li>
<li>abcdef</li>
</ul>
</nav>
CSS
nav {
width: 100%;
line-height: 1.4em;
}
ul {
list-style: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
text-align: justify;
margin-bottom: -1.4em;
}
ul:after {
content: "";
display: inline-block;
width: 100%;
}
li {
display: inline-block;
}
노트
-
nav
,ul
및li
태그는 '탐색 (메뉴) 항목 목록'이라는 의미 론적 의미로 선택되었습니다. 물론 다른 태그도 사용할 수 있습니다. -
:after
가상 엘레멘트는ul
에서 여분의 'line'을 발생시키고 따라서이 블럭의 여분의, 빈 높이가 생기고, 다른 내용을 밀어 낸다. 이것은 음의margin-bottom
의해 해결되며,line-height
와 동일한 크기 (음수)를 가져야합니다. - 페이지가 너무 좁아서 모든 항목이 맞지 않으면 항목이 새 줄로 바뀌고 (오른쪽부터)이 줄에서 맞춰집니다. 메뉴의 전체 높이는 필요에 따라 증가합니다.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow