Html 保证金+；？=flexbox中的100%宽度

我有一个宽度为

80vw

的flexbox，里面的内容

align items:center

和

justify content:center

。该列中的所有项目的两侧都有

28px

边距。现在，它们非常瘦，只占了80vw的一部分。检查它会发现两边都有大量空白

我仍然想要像文本居中这样的东西，但是像选择框这样的东西应该占据整个容器的宽度（包括边距）

我在这里读了一些东西，我尝试设置

宽度：100%

，但这不仅忽略了居中css（将项目一直推到左侧），而且也忽略了边距，边距溢出了容器的宽度

最后，我尝试了

calc

，并计算了

80vw-28px

作为内部内容的宽度，但这做了一些奇怪的事情，只使用了一半的边距，其余的从容器中溢出

.outerContainer{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：绝对位置；
宽度：100vw；
高度：100vh；
背景色：黑色；
}
.modalContainer{
宽度：80vw；
背景色：白色；
z指数：2；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}
.内容1{
利润率：20px28px10px28px；
字体大小：27px；
线高：21px；
}
.内容2{
利润率：10px28px20px28px；
}

你好，世界！

您可以使用该函数将内容div设置为100%宽度减去边距（添加到我在下面更改的行中的注释）：

.outerContainer{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：绝对位置；
宽度：100vw；
高度：100vh；
背景色：黑色；
}
.modalContainer{
宽度：80vw；
背景色：白色；
z指数：2；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}
.内容1{
利润率：20px28px10px28px；
字体大小：27px；
线高：21px；
}
.内容2{
利润率：10px28px20px28px；
宽度：计算（100%-56px）；/*100%宽度减去28px x 2*/
}
.content2>输入{
宽度：100%；/*使输入拉伸全宽*/
}

你好，世界！

您可以使用该函数将内容div设置为100%宽度减去边距（添加到我在下面更改的行中的注释）：

.outerContainer{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：绝对位置；
宽度：100vw；
高度：100vh；
背景色：黑色；
}
.modalContainer{
宽度：80vw；
背景色：白色；
z指数：2；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
}
.内容1{
利润率：20px28px10px28px；
字体大小：27px；
线高：21px；
}
.内容2{
利润率：10px28px20px28px；
宽度：计算（100%-56px）；/*100%宽度减去28px x 2*/
}
.content2>输入{
宽度：100%；/*使输入拉伸全宽*/
}

你好，世界！

刚刚添加了代码片段。如果检查文本中的元素，您会注意到它不是全宽的。（显然，我没有包括我失败的尝试），但这正是我想要的。特别是输入为全宽（减去边距）。两边都有

28px

边距。总共是

56px

您需要在

calc

中减去。您是对的。那是个愚蠢的错误。不幸的是，这使得所有内容都向左对齐（尽管边距正确）。我希望文本和按钮（不在代码段中）位于中间，但仍保持输入的全宽。只添加了代码段。如果检查文本中的元素，您会注意到它不是全宽的。（显然，我没有包括我失败的尝试），但这正是我想要的。特别是输入为全宽（减去边距）。两边都有

28px

边距。总共是

56px

您需要在

calc

中减去。您是对的。那是个愚蠢的错误。不幸的是，这使得所有内容都向左对齐（尽管边距正确）。我希望文本和按钮（不在代码段中）位于中间，但仍保持输入的全宽。我应该指出，如果您在content 2 div中也有文本，并且希望居中，只需将

text align:center

添加到

。content2

我应该指出，如果您在content 2 div中也有文本，要使其居中，只需将

text align:center

添加到

.content2