Question

我目前正在制作一个tumblr主题，但却陷入了页面导航的困境。 “上一页”和“下一页”按钮的html或仅在可用的情况下呈现。因此，第一页上没有下一个按钮，最后一页没有上一个按钮。这就是我希望单个按钮拉伸到100％宽度的地方。我可以在javascript中执行此操作，但它根本不是一个选项，因为模板也可以在没有javascript的情况下工作。

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％自动;但无法弄清楚如何制作它。

提前致谢。

2 个答案:

答案 0 :(得分：4)

答案 1 :(得分：3)

Answer 1

您可以使用表格显示样式。

/* 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

Answer 2

您可以执行以下操作：

将position:relative添加到您的父容器
创建一个名为“full-width”的新类，其中包含
```
position: absolute;
left:0px;
right:0px;
```
将班级full-width添加到相应的按钮

拉伸div到全宽（如果有空位）

2 个答案: