将 div 拉伸到全宽（如果有空间）答案

【问题标题】：Stretch div to full width (if space available)将 div 拉伸到全宽（如果有空间）
【发布时间】：2022-05-06 02:50:06
【问题描述】：

我目前正在开发 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 的边距。我尝试用 min-width 和 width: 100% auto; 修复它但真的不知道怎么做。

提前致谢。

【问题讨论】：

标签： css html width css-float

【解决方案1】：

您可以执行以下操作：

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

【讨论】：

上面写着：position:relative，应该是position:absolute。

【解决方案2】：

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

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

【讨论】：

这种风格的唯一问题是它在 IE 7 或 IE 6 中不受支持。不过我不确定 Janik Lipke 是否在乎。
太好了，这似乎有效。很容易，但我根本没有那个属性。中间的边距（8px）对我来说仍然是个问题。

【解决方案3】：

你可以试试：

.continer {
display: flex;
align-items: stretch;
}

对于子组件：

.subContiner {
width: 100%;
}

【讨论】：