Question

以下CSS似乎正在做我想要的。只是想知道它是否可以修剪并仍然做同样的事情。

.qr-setup {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:40%  ;}

.qr-setup table {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:80%  ;
}

.qr-setup table tr td {
  border: none;
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:80%  ;
}

Answer 1

你只需要这个：

.qr-setup {
    width:40%;
}

.qr-setup table, .qr-setup table tr td {
    width:80%;
}

.qr-setup table tr td {
    border: none;
}

.qr-setup, .qr-setup table, .qr-setup table tr td {
    text-align: center;
    margin-left: auto;
    margin-right: auto; 
}

您可以使用逗号重复所有列出的css。

Answer 2

.qr-setup, .qr-setup table, .qr-setup tr td {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width: 80%;}

.qr-setup {
  width:40%  ;
}

.qr-setup table tr td {
 border: none;

}

Answer 3

甚至还有

的简写

margin-left: auto;
margin-right: auto;

即

margin:0 auto;

此代码将margin-top和margin-bottom设置为0，margin-left和margin-right设置为auto。

有没有办法让这个CSS更简洁？

3 个答案: