Question

我有这个样式的div：

#slogan{
    font-size:24px;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

后4种风格只是将div内容集中在页面上。

如果页面太大，我不想再使用以下样式了，所以我应用这种风格：

@media only screen and (min-width: 941px){
    #slogan {
        font-size: 24px;
        position: absolute;
        min-width: 810px;
        text-align: right;
    }
}

从页面左边缘显示一定数量的内容。我在f12开发工具中测试了这些样式，看起来是正确的。但是，当我在css表单中应用样式时，边距和右/左部分仍然应用于元素，我不知道如何取消它们（边距没有默认值）。

任何帮助？

Answer 1

使用none, inherit or initial取消设置。

@media only screen and (min-width: 941px){
    #slogan {
        font-size: 24px;
        position: absolute;
        min-width: 810px;
        text-align: right;
        margin-left:none;
        margin-right:none;
    }
}

Answer 2

你可以尝试：

margin-left: unset;
margin-right: unset;

但我不确定他们的支持程度如何。或者将它们设置为0，这是默认值;

Answer 3

你也可以用另一种方式设置@media

@media only screen and (max-width: 941px){
   #slogan {
    position:absolute;
    left:0;
    right:0;}
  }

Answer 4

如果你想覆盖css那么你必须使用！important之后的属性如下： -

#slogan{
    font-size:24px;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto !important;//Whatever u want to overwrite
    margin-right:auto !important;
}

如何在CSS中覆盖边距和右/左？

4 个答案: