CSS 수평 메뉴 - 똑같이 간격?

StackOverflow https://stackoverflow.com/questions/1203910

  •  05-07-2019
  •  | 
  •  

문제

UL 및 LI 태그로 만든 표준 CSS 메뉴가 있습니다. 나는 그들이 수평으로 전체 페이지를 수평으로 다루어야한다 (내 실제 사례는 아니지만 상황을 단순화하기 위해 이것을 가져갈 것이다). 그러나 항목은 동적으로 생성되므로 Li 항목이나 여백과 함께 하드 코딩 할 수 없습니다.

JavaScript를 사용하여 해당 값을 설정하는 솔루션을 보았지만 실제로는 피하고 싶습니다.

마지막으로, 나는 설정하는 꽤 좋은 솔루션을 보았습니다.

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

이렇게하면 대부분의 브라우저에서 원하는 동작이 생성됩니다.

어떤 아이디어?

편집 : 응답에 감사드립니다. 그러나 항목을 생성하는 코드는 내 것이 아니기 때문에 나중에 JavaScript를 사용하지 않고 만들 때 인라인 스타일을 설정할 수 없습니다.

도움이 되었습니까?

해결책

인라인 요소의 높이 또는 너비를 설정할 수 없습니다. http://www.w3.org/tr/css2/visudet.html#inline-width

노력하다 display:inline-block;

IE에 대한 수정 사항은 다음과 같습니다.

display:inline-block;
zoom:1;
*display:inline;

다른 팁

요소가 사용 가능한 전체 공간을 얻도록하려면 정의 할 필요가 없습니다. 선험적으로 메뉴 요소의 너비 (물론 Li 요소를 동등하게 크기를 조정하는 데 도움이됩니다). 작업을 통해이 문제를 해결할 수 있습니다 display 재산.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

주목하십시오 width:1% 필요합니다 셀 붕괴를 피하기 위해.

메뉴 항목이 동적으로 생성되는 경우 (따라서 얼마나 많은지 알 수 없습니다) 추가 할 수 있습니다. style="width:xx" 에 귀속 lis (또는 in <style> 맨 위에 ... 또는 당신이 어디에나, 정말로). 어디에 xx 둘 중 하나입니다 width_of_parent_div_in_px/number_of_elements+'px', 또는 100/number_of_elements+'%'. 그만큼 lis도 있어야합니다 block-레벨 요소 및 float에드 left.

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

너비 : 18%는 5 개의 요소가 있고 국경 및 패딩을 설명하는 경우 옳을 수 있습니다. 그러나 가지고있는 요소 수, 패딩의 양 등으로 인해 다양합니다.

Flexbox를 사용하기에 열려 있다면 어렵지 않습니다. 내가 게시하려고하는 코드에 대한 전체 크레딧 CSS 트릭 이것이 그들의 CS입니다.

아래는 공급 업체 접두사를 포함하는 예입니다.

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }
<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Flexbox의 유일한 문제는 IE 9 이하를 지원 해야하는 경우 Flexbox를 사용하지 않을 이유가 없습니다. 당신은 할 수 있습니다 Flexbox의 브라우저 지원을 여기에서 볼 수 있습니다.

저에게 효과가있는 것은 다음과 같습니다.

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top