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 와 동일한 크기 (음수)를 가져야합니다.
• 페이지가 너무 좁아서 모든 항목이 맞지 않으면 항목이 새 줄로 바뀌고 (오른쪽부터)이 줄에서 맞춰집니다. 메뉴의 전체 높이는 필요에 따라 증가합니다.