使用填充居中，而不是使用CSS (没有额外的包装器DIV)
使用填充居中，而不是使用CSS (没有额外的包装器DIV)
提问于 2020-01-31 19:40:32
我想创建一个导航栏与内容居中，并限制到一个宽度。
我可以使用以下命令将其居中
margin: auto;但实际上我想让背景延伸整个屏幕的宽度。所以我试着
padding: auto;但这并不管用。我能想到的最接近的(在我写这个问题的时候)是：
padding-left: calc((1vw - 1080px)/2);
padding-right: calc((1vw - 1080px)/2);回答 1
Stack Overflow用户
发布于 2020-01-31 19:43:08
实际上我已经很接近了
padding-left: calc((100% - 1080px)/2);
padding-right: calc((100% - 1080px)/2);使用SCSS，我可以创建两个混入来设置响应宽度，如下所示
@mixin global-width {
margin: auto;
@include for-tablet-landscape-up {
width: 800px;
}
@include for-desktop-up {
width: 1080px;
}
}
@mixin padded-width {
padding-left: 0;
padding-right: 0;
@include for-tablet-landscape-up {
padding-left: calc((100% - 800px)/2);
padding-right: calc((100% - 800px)/2);
}
@include for-desktop-up {
padding-left: calc((100% - 1080px)/2);
padding-right: calc((100% - 1080px)/2);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60003224
复制相关文章
相似问题
腾讯云开发者
