div를 전체 너비로 늘입니다 (사용 가능한 공간 인 경우)

현재 tumblr 테마에서 작업하고 있지만 페이지 탐색에 걸렸습니다. "이전"및 "다음"버튼에 대한 html 또는 사용 가능한 경우에만 렌더링됩니다. 첫 페이지에는 다음 버튼이없고 마지막 페이지에는 이전 버튼이 없습니다. 그리고 이것은 내가 원하는대로 하나의 버튼을 100 % 너비로 늘려야합니다. 자바 스크립트에서는이 작업을 수행 할 수 있지만 템플릿은 자바 스크립트 없이도 작동하므로 옵션이 아닙니다.div를 전체 너비로 늘입니다 (사용 가능한 공간 인 경우)

html로는 다음과 같습니다

<div id="navigation"> 
<a href="#" id="prev" style="width:476px; float:left;" class="button_normal"><p>Prev</p></a> 
<a href="#" id="next" style="width:476px; float:right;"class="button_normal"><p>Next</p></a> 
</div>

CSS : 부모 DIV의

.button_normal { 
text-align: center; 
opacity: 0.55; 
height: 30px; 
line-height: 30px; 
background: white; 
font-size: 13px; 
font-weight: 100; 
color: #646464; 
border: 1px solid #646464; 
text-decoration: none; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
margin-bottom: 10px; 
} 

#navigation{ 
clear: both; 
width: 100%; 
}

폭이 960 픽셀, 그래서 두 버튼 사이에 8px 여유가 있어야한다. 최소 너비와 너비로 고정하려고했습니다 : 100 % 자동; 그러나 그것을 만드는 방법을 정말로 생각할 수 없었다.

미리 감사드립니다.

출처

2012-03-09 Janik

테이블 표시 스타일을 사용할 수 있습니다.

/* add these properties to your stylesheet */ #navigation { display:table; } .button_normal { display:table-cell; }

// remove the inline styles from your anchors 
<div id="navigation"> 
    <a href="#" id="prev" class="button_normal"><p>Prev</p></a> 
    <a href="#" id="next" class="button_normal"><p>Next</p></a> 
</div>

예 : 당신이 할 수있는

출처

2012-03-09 17:18:49 Joel

에 클래스 full-width 추가 . – xbrady

위대한,이 작동하는 것. 아주 쉽지 만 그 속성을 전혀 사용하지 않았습니다. 중간 (8px)의 여백은 여전히 나를위한 이슈로 보입니다. – Janik

http://jsbin.com/unuwuh/2는 다음

는 부모 컨테이너에 position:relative 추가
"풀라는 새로운 클래스를 만듭니다 너비 "이고 그 안에는
```
position: absolute; 
left:0px; 
right:0px; 
```
야니크 Lipke 그래도 관심이 경우이 스타일 유일한 문제는 그것이 잘 모르겠어요 IE 7 IE 6에서 지원되지 않습니다되고 해당 버튼

출처

2012-03-09 17:34:46 t0nyh0

div를 전체 너비로 늘입니다 (사용 가능한 공간 인 경우)

답변

관련 문제