Stretch div для полной ширины (если доступно)

В настоящее время я работаю над темой tumblr, но застрял в навигации по страницам. html для кнопок «Предыдущая» и «Следующая» или только отображается, если они доступны. Таким образом, на первой странице нет следующей кнопки и на последней странице нет предыдущей кнопки. , и именно здесь я хочу, чтобы каждая отдельная кнопка растягивалась до 100% ширины. Я мог бы сделать это в javascript, но это не вариант вообще, так как шаблон будет работать без javascript.Stretch 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:

.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%; 
}

ширина родительского DIV является 960px, поэтому должен быть запас 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>

Пример: http://jsbin.com/unuwuh/2

источник

2012-03-09 17:18:49 Joel

Единственная проблема с этим стилем оно не поддерживается в IE 7 или IE 6. Я не уверен, если Яник Lipke заботится хотя , – xbrady

Отлично, это похоже на работу. Довольно легко, но я не обладал этим свойством. Маржа в середине (8 пикселей) по-прежнему кажется проблемой для меня. – Janik

Вы можете сделать следующее:

Добавить position:relative в свой родительский контейнер
Создайте новый класс под названием «дневная ширина "и в нем есть
```
position: absolute; 
left:0px; 
right:0px; 
```
Добавьте класс full-width к соответствующей кнопке

источник

2012-03-09 17:34:46 t0nyh0

Stretch div для полной ширины (если доступно)

ответ

Смежные вопросы