[html] HTML + CSS에서 가로 메뉴를 * 정말로 * 정렬하려면 어떻게합니까?

Program / 글쓴이

HTML의 메뉴 모음에 대한 많은 자습서를 찾을 수 있지만이 특정 (IMHO 일반) 경우에는 괜찮은 해결책을 찾지 못했습니다.

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #
  • 다양한 텍스트 전용 메뉴 항목이 있으며 페이지 레이아웃은 유동적입니다.
  • 첫 번째 메뉴 항목은 왼쪽 정렬되어야하고 마지막 메뉴 항목은 오른쪽 정렬되어야합니다.
  • 나머지 항목은 메뉴 표시 줄에 최적으로 분산되어야합니다.
  • 숫자는 다양하므로 최적의 너비를 미리 계산할 기회가 없습니다.

TABLE은 여기서도 작동하지 않습니다.

  • 모든 구축 전차를 중앙에 배치하면 첫 번째 항목과 마지막 항목이 올바르게 정렬되지 않습니다.
  • 왼쪽 정렬 및 오른쪽 정렬하면 첫 번째 resp. 마지막 항목의 경우 간격은 차선이됩니다.

HTML과 CSS를 사용하여 깔끔하게 구현할 수있는 확실한 방법이 없다는 것이 이상하지 않습니까?

답변

현대적인 접근 방식 -Flexboxes !

이제 CSS3 플렉스 박스 가 더 나은 브라우저 지원을 제공 하므로 우리 중 일부는 마침내 사용할 수 있습니다. 더 많은 브라우저 적용 범위를 위해 추가 공급 업체 접두사를 추가하기 만하면됩니다 .

이 경우, 당신은 단지 부모 요소의 설정 것 display까지를 flex한 다음 변경 justify-content속성을 하나에 space-between또는 space-around간 또는 아이들의 주위에 공간을 추가하기 위해이 항목 인 flexbox.

사용justify-content: space-between – ( 여기 예) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}
<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

스 니펫 확장

사용justify-content: space-around – (여기에 예) :

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}
<ul class="menu">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three Longer</li>
    <li>Item Four</li>
</ul>

스 니펫 확장

답변

가장 간단한 방법은 사용 가능한 남은 공간보다 많은 공간을 차지할 줄 끝에 요소를 삽입 한 다음 숨겨 줄을 강제로 끊는 것입니다. 다음과 같은 간단한 span요소 로이 작업을 아주 쉽게 수행했습니다 .

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}
<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
  <span></span>
</div>

스 니펫 확장

#menu span선택기 내부의 모든 정크 는 대부분의 브라우저를 만족시키는 데 필요합니다. span요소 의 너비 를 100 %로 강제 설정 해야합니다 display: inline-block. 규칙 에 따라 인라인 요소로 간주되므로 줄 바꿈이 발생합니다 . inline-block또한 요소가 메뉴에 맞지 않아 메뉴가 줄 바꿈되는 span것과 같은 블록 수준 스타일 규칙을 사용할 width수 있습니다.

물론 span사용 사례와 디자인 에 맞게의 너비를 조정해야 하지만 일반적인 아이디어를 얻고 적응할 수 있기를 바랍니다.

답변

좋아,이 솔루션은 때문에 지원의 부족, IE6 / 7에서 작동하지 않습니다 :before/ :after하지만 :

ul {
  text-align: justify;
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
ul:after {
  content: "";
  margin-left: 100%;
}
li {
  display: inline;
}
a {
  display: inline-block;
}
<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
  </ul>
</div>

스 니펫 확장

내가 a 태그를 사용하는 inline-block이유는 안에있는 단어도 정당화되기를 원하지 않기 때문이며 나도 나누지 않는 공백을 사용하고 싶지 않기 때문입니다.

답변

해결책이 있습니다. FF, IE6, IE7, Webkit 등에서 작동합니다.

닫기 전에 공백을 넣지 않았는지 확인하십시오 span.inner. IE6가 중단됩니다.

선택적 .outer으로 너비를 지정할 수 있습니다.

.outer {
  text-align: justify;
}
.outer span.finish {
  display: inline-block;
  width: 100%;
}
.outer span.inner {
  display: inline-block;
  white-space: nowrap;
}
<div class="outer">
  <span class="inner">THE MENU ITEMS</span>
  <span class="inner">SHOULD BE</span>
  <span class="inner">JUSTIFIED</span>
  <span class="inner">JUST AS</span>
  <span class="inner">PLAIN TEXT</span>
  <span class="inner">WOULD BE</span>
  <span class="finish"></span>
</div>

스 니펫 확장

답변

Opera, Firefox, Chrome 및 IE에서 작동

ul {
   display: table;
   margin: 1em auto 0;
   padding: 0;
   text-align: center;
   width: 90%;
}

li {
   display: table-cell;
   border: 1px solid black;
   padding: 0 5px;
}

답변

또 다른 해결책. 고유 클래스 등을 추가하는 것과 같이 html을 처리 할 수있는 옵션이 없었기 때문에 순수한 CSS 방법을 찾았습니다.

Chrome, Firefox, Safari에서 작동합니다. IE에 대해 모릅니다.

테스트 : http://jsfiddle.net/c2crP/1

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px;
  text-align: justify;
  list-style-type: none;
}
ul > li {
  display: inline;
  text-align: justify;
}

/* declaration below will add a whitespace after every li. This is for one line codes where no whitespace (of breaks) are present and the browser wouldn't know where to make a break. */
ul > li:after {
  content: ' ';
  display: inline;
}

/* notice the 'inline-block'! Otherwise won't work for webkit which puts after pseudo el inside of it's parent instead of after thus shifting also the parent on next line! */
ul > li:last-child:after {
  display: inline-block;
  margin-left: 100%;
  content: ' ';
}
<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">exposities</a></li>
  <li><a href="#">werk</a></li>
  <li><a href="#">statement</a></li>
  <li><a href="#">contact</a></li>
</ul>

스 니펫 확장

답변

<p>함께 만드 text-align: justify시겠습니까?

업데이트 : 신경 쓰지 마세요. 내가 생각했던 것처럼 전혀 작동하지 않습니다.

업데이트 2 : 현재 IE 이외의 브라우저에서는 작동하지 않지만 CSS3는 다음과 같은 형식으로이를 지원합니다.text-align-last