지정된 컨테이너에서 고정 된 수의 수평 탐색 항목을 균등하고 완전히 늘리는 방법
900px 컨테이너에 6 개의 탐색 항목을 균등하게 늘리고 그 사이에 공백을 균등하게 늘리고 싶습니다. 예를 들어 ...
---| 900px Container |---
---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |---
현재이 작업을 수행하는 가장 좋은 방법은 다음과 같습니다.
nav ul {
width: 900px;
margin: 0 auto;
}
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 150px;
}
이 문제는 두 가지입니다. 우선, 진정으로 정당화하는 것이 아니라 li 태그를 ul 태그 전체에 고르게 분산시킵니다 .. "HOME"또는 "ABOUT"과 같은 작은 메뉴 항목과 "BASIC SERVICES"와 같은 큰 메뉴 항목 사이에 고르지 않은 공백을 만듭니다. .
두 번째 문제는 탐색 항목이 150px보다 크면 레이아웃이 중단된다는 것입니다. SPECIALTY SERVICES는 전체 탐색에 충분한 공간이 있더라도 마찬가지입니다.
누구든지 나를 위해 이것을 해결할 수 있습니까? 나는 해결책을 찾기 위해 웹을 샅샅이 뒤졌고 모두 부족한 것 같습니다. 가능한 경우에만 CSS / HTML ...
감사!
업데이트 (7/29/13) : 테이블 셀을 사용하는 것이이 레이아웃을 구현하는 가장 현대적인 방법입니다. 아래 felix의 대답을 참조하십시오. 이 table cell속성 은 현재 브라우저의 94 %에서 작동합니다 . IE7 이하에 대해 뭔가를해야하지만 그렇지 않으면 괜찮을 것입니다.
업데이트 (7/30/13) : 안타깝게도이 레이아웃을 미디어 쿼리와 결합하는 경우 이에 영향을 미치는 웹킷 버그가 있습니다. 지금은 'display'속성을 변경하지 않아야합니다. Webkit 버그를 참조하십시오.
업데이트 (7/25/14) : 이제 text-align : justify와 관련된 더 나은 솔루션이 아래에 있습니다. 이것을 사용하는 것이 더 간단하며 Webkit 버그를 피할 수 있습니다.
text-align:justify컨테이너에서 사용 하면 목록에있는 요소 수에 관계없이 작동합니다 (각 목록 항목에 대해 % 너비를 계산할 필요가 없습니다).
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BASIC SERVICES</a></li>
<li><a href="#">OUR STAFF</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>이것은 정말 작동합니다. 또한 미디어 쿼리를 사용하여 가로 스타일을 쉽게 해제 할 수 있다는 이점이 있습니다. 예를 들어 휴대폰에서 세로로 스택하려는 경우입니다.
HTML
<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
CSS
#nav {
display: table;
height: 87px;
width: 100%;
}
#nav li {
display: table-cell;
height: 87px;
width: 16.666666667%; /* (100 / numItems)% */
line-height: 87px;
text-align: center;
background: #ddd;
border-right: 1px solid #fff;
white-space: nowrap;
}
@media (max-width: 767px) {
#nav li {
display: block;
width: 100%;
}
}
http://jsfiddle.net/timshutes/eCPSh/416/
가능한 경우 flexbox를 사용하십시오.
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PREVIOUS PROJECTS</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>RESEARCH & DEV</li>
<li>CONTACT</li>
</ul>
ul {
display: flex;
justify-content:space-between;
list-style-type: none;
}
jsfiddle : http://jsfiddle.net/RAaJ8/
브라우저 지원은 실제로 꽤 좋습니다 (접두사에 다른 불쾌한 항목 포함) : http://caniuse.com/flexbox
이상적인 솔루션은 다음과 같습니다.
- 탐색 컨테이너의 너비에 맞게 자동 확장
- 동적 수의 메뉴 항목을 지원합니다.
컨테이너 ul내부의 간단한 메뉴를 사용 nav하여 위의 요구 사항을 충족하는 솔루션을 구축 할 수 있습니다.
HTML
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Basic Services</li>
<li>Specialty Services</li>
<li>Our Staff</li>
<li>Contact Us</li>
</ul>
</nav>
첫째, 컨테이너 ul의 전체 너비를 갖도록 강제해야합니다 nav. 이를 위해, 우리는 사용 :after과 사이비 요소를 width: 100%.
이것은 우리의 목표를 완벽하게 달성하지만 가짜 요소에서 후행 공백을 추가합니다. line-height의 ul를 0으로 설정하고 li자식 에 대해 다시 100 % 로 설정하여 IE8을 통해 모든 브라우저에서이 공백을 제거 할 수 있습니다 . 아래 예제 CodePen 및 솔루션을 참조하십시오.
CSS
nav {
width: 900px;
}
nav ul {
text-align: justify;
line-height: 0;
margin: 0;
padding: 0;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav ul li {
display: inline-block;
line-height: 100%;
}
나는 위의 모든 것을 시도했고 그들이 원하는 것을 발견했습니다. 이것은 제가 알아낼 수있는 가장 간단한 가장 유연한 솔루션입니다 (위의 모든 영감 덕분에).
HTML
<div id="container">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PREVIOUS PROJECTS</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>RESEARCH & DEV</li>
<li>CONTACT</li>
</ul>
</div>
CSS
div#container{
width:900px;
background-color:#eee;
padding:20px;
}
ul {
display:table;
width: 100%;
margin:0 0;
-webkit-padding-start:0px; /* reset chrome default */
}
ul li {
display:table-cell;
height:30px;
line-height:30px;
font-size:12px;
padding:20px 10px;
text-align: center;
background-color:#999;
border-right:2px solid #fff;
}
ul li:first-child {
border-radius:10px 0 0 10px;
}
ul li:last-child {
border-radius:0 10px 10px 0;
border-right:0 none;
}
당연히 첫 번째 / 마지막 자식 둥근 끝을 떨어 뜨릴 수 있지만, 나는 그들이 진짜 순수하다고 생각합니다 (그리고 당신의 고객도 그렇습니다;)
컨테이너 너비는 수평 목록을 제한하지만 원하는 경우이를 버리고 UL에 절대 값을 적용 할 수 있습니다.
마음에 들면 그것으로 ..
http://jsfiddle.net/tobyworth/esehY/1/
이것은 당신을 위해 그것을 할 것입니다.
<div id="nav-wrap">
<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
#nav-wrap {
float: left;
height: 87px;
width: 900px;
}
#nav {
display: inline;
height: 87px;
width: 100%;
}
.nav-item {
float: left;
height: 87px;
line-height: 87px;
text-align: center;
text-decoration: none;
width: 150px;
}
li 너비를 0.5 %의 여백으로 16 %로 설정해 보셨습니까?
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 16%;
margin-right: 0.5%;
}
편집 : UL을 100 % 너비로 설정합니다.
nav ul {너비 : 100 %; 여백 : 0 자동; }
이것은 CSS flexbox 모델이 수정하는 종류입니다. 각 li이 나머지 너비의 동일한 비율을 받도록 지정할 수 있기 때문입니다.
저는 많은 다른 것을 시도했고 마침내 저에게 가장 잘 맞는 것은 단순히 padding-right: 28px;
나는 항목을 균등하게 간격을두기 위해 적절한 양을 얻기 위해 패딩을 가지고 놀았습니다.
Instead of defining the width, you could just put a margin-left on your li, so that the spacing is consistent, and just make sure the margin(s)+li fit within 900px.
nav li {
line-height: 87px;
float: left;
text-align: center;
margin-left: 35px;
}
Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>
<div id="container">
<object>
<div>
alpha
</div>
</object>
<object>
<div>
beta
</div>
</object>
<object>
<div>
charlie
</div>
</object>
<object>
<div>
delta
</div>
</object>
<object>
<div>
epsilon
</div>
</object>
<object>
<div>
foxtrot
</div>
</object>
<span></span>
</div>
</html>
I'm hesitant to offer this as it misuses ye olde html. It's not a GOOD solution but it is a solution: use a table.
CSS:
table.navigation {
width: 990px;
}
table.navigation td {
text-align: center;
}
HTML:
<table cellpadding="0" cellspacing="0" border="0" class="navigation">
<tr>
<td>HOME</td>
<td>ABOUT</td>
<td>BASIC SERVICES</td>
<td>SPECIALTY SERVICES</td>
<td>OUR STAFF</td>
<td>CONTACT US</td>
</tr>
</table>
This is not what tables were created to do but until we can reliably perform the same action in a better way I guess it is just about permissable.
'IT TIP' 카테고리의 다른 글
| 독립형 Java 애플리케이션에서 Spring 3 autowire 사용 (0) | 2020.11.03 |
|---|---|
| 동일한 형식으로 비디오 크기를 줄이고 프레임 크기를 줄입니다. (0) | 2020.11.03 |
| Eclipse에서 클래스 및 해당 파일의 이름을 바꾸는 방법 (0) | 2020.11.03 |
| Windows 7 : DLL을 등록 할 수 없음-오류 코드 : 0X80004005 (0) | 2020.11.03 |
| AlarmManager에서 활성 PendingIntents 목록 가져 오기 (0) | 2020.11.03 |