조정 된 탐색 버튼

다양한 기본 메뉴 항목이있는 웹 사이트의 기본 탐색 메뉴를 만들려고합니다. 네비게이션 바는 가로이고 너비는 738px입니다. 왼쪽에서 가장 왼쪽에있는 항목을 18px, 오른쪽 가장자리에서 가장 오른쪽에있는 항목을 18px, 다른 메뉴 항목을 균등하게 펼치고 싶습니다. 나는 테이블이없는 레이아웃을 사용하고 있습니다.조정 된 탐색 버튼

지금까지 내가 원하는대로 정확하게 작동하도록 만들지 못했습니다. margin: auto 설정이 도움이되지 않는 것 같습니다. 테이블을 사용하여 양면에 18px 여백을 유지할 수 없습니다. 한 가지 아이디어는 text-align: justify을 사용하는 것이지만 한 줄을 정당화하지는 않습니다.

이 작업을 수행하는 간단하거나 간단한 방법이 있습니까? 아니면 시각 요구 사항을 완화하도록 AD에 요청해야합니까?

출처

2010-04-04 Kaivosukeltaja

가정 :

<div id="nav"> 
    <div id="inner"> 
    <div>item one</div> 
    <div>item two</div> 
    <div>item three</div> 
    <div>item four</div> 
    </div> 
</div>

사용 :

#inner { margin: 0 18px; overflow: auto; } 
#inner div { width: 25%; float: left; }

이 두 가지 제한이 있습니다 : 그것은 전체 사용 가능한 폭보다는 필요한 폭 될 각 항목을 뻗어

합니다. 필요한 너비가 필요하면 리프 div를 스트레치하지 않을 내용의 컨테이너로 사용할 수 있습니다. 및
사전에 어린이 수를 알아야합니다.

출처

2010-04-04 08:55:22 cletus

정렬되지 않은 목록

<ul class="NavBar"> 
<li><a href="#" class="First">Item</a></li> 
<li><a href="#">Item</a></li> 
<li><a href="#">Item</a></li> 
<li><a href="#">Item</a></li> 
<li><a href="#" class="Last">Item</a></li> 
</ul>

그리고 CSS

.NavBar 
{ 
display:block; margin:auto; 
width:738px; 
}  
.NavBar li 
{ 
display:inline; 
text-align:justify; 
list-style:none; 
width:140px; 
} 

.Navbar .First 
{ 
margin-left:18px; 
} 

.Navbar .Last 
{ 
margin-right:18px; 
}

출처

2010-04-04 12:54:26 sidcom

메뉴 항목의 수가 변수 인 경우를 사용하여 HTML, 나는 순수 CSS의 솔루션을 생각할 수 없다. 자바 스크립트를 사용하여 CSS의 수에 따라 각 항목의 너비를 계산할 수 있으며 CSS를 동적으로 수정할 수 있습니다 (jQuery와 같은 DOM/Javascript 라이브러리에서 매우 쉽게 수행 할 수 있음). 비활성화 된 자바 스크립트로 인해 형세.

출처

2010-04-04 17:52:00

내가 문제를 이해한다면, 그것은 당신에게 약간의 도움이 될 수 있습니다

HTML :

<ul class="lnkList"> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
</ul>

CSS :

ul.lnkList{display:block; float:left; margin:auto; width:708px; 
     height:20px; padding:0px 15px;} 

ul.lnkList li{list-style:none; display:block; float:left; 
     width:111px; margin:0px 3px;} 

ul.lnkList li a{display:block; float:left; width:111px;}

그것 당신이 경우에 할 수있는 일에 대해 단지 샘플 너는 6 개의 블록을 가지고있다. 그것의 정당화.

출처

2010-04-05 09:11:25 spielersun

조정 된 탐색 버튼

답변

관련 문제