我目前正在研究一个 tumblr 主题,但卡在了页面导航上。 “上一个”和“下一个”按钮的 html 或仅呈现(如果可用)。 所以第一页没有下一个按钮,最后一页没有上一个按钮。 这就是我希望相应的单个按钮拉伸(stretch)到 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的边距。 我尝试用 min-width 和 width: 100% auto; 修复它但无法真正弄清楚如何制作它。
提前致谢。
最佳答案
您可以执行以下操作:
- 添加一个
position:relative
到你的父容器 创建一个名为“full-width”的新类,其中有
position: absolute; left:0px; right:0px;
给相应的按钮添加类
full-width
关于css - 将 div 拉伸(stretch)至全宽(如果有可用空间),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9638210/