Question

我很确定这很容易，但我很难过。

我正在制作响应式布局设计。无论页面大小如何，我总是希望左边有10px的边距，右边有10px的边距。我能够在左边实现10px的保证金，但我无法找出合适的保证金。我怎么用css做这个？我可以根据我想要的空间大小来估算％宽度，但很明显，随着页面大小的缩放，这个边距也是如此。我如何始终保持保证金权利？以下是我的代码示例：

form {
width: 100%;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
    }

＆＃39;形式＆＃39;坐在里面＆＃39; #wrap＆＃39;和＆＃39; .left＆＃39;所有这些都具有相同的保证金权利：

#wrap {
width: 95%;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: auto;
-moz-box-shadow: 0 0 3px 3px #CCC;
-webkit-box-shadow: 0 0 3px 3px#CCC;
box-shadow: 0 0 3px 3px #CCC;
background-color: #fff;
display: inline-block;
text-align: center;
}

.left {
float: left;
text-align: left;
padding-right: 10px;
padding-left: 18px;
font-weight: lighter;
font-size: 12px;
color: #777777;
padding-top: 10px;
width: 100%;
margin-right: 10px;
}

Answer 1

这将带来魔力：

form {
  width: auto;
  display: block;
  margin-left: 10px;
  margin-right: 10px;
}

Answer 2

问题是表单最终是其父容器的宽度的100％加上两个边距的20px。

在父元素中设置表单并在其上添加填充会更容易。 e.g。

body{
 padding:0px 10px;
}

form {
  width: 100%;
  display: inline-block;
 }

具有响应布局的边距

2 个答案: