Question

这是我的小提琴：http://jsfiddle.net/o7pfjv3w/。我尝试将网格类添加到margin-left:10px和margin-right:10px;，但会显示滚动条。我该如何摆脱它？

css代码：

.main{width: 100%;border:1px solid black;overflow:auto;display:block;}
.grid{width:100%; margin-left:10px;margin-right:10px}

html代码：

<div>
   <div class="main">
       <div class="grid">           <p>ppppppppppppppp pppppppppppppppppppppppppppppp ppppppppppppppppppppppp ppppppppppppppp</p>
       </div>
   </div>
</div>

Answer 1

只需将overflow:auto;更改为overflow:hidden;

即可

.main{
    width: 100%;
    border:1px solid black;
    overflow:hidden; // not auto
    display:block;
}

以下是更新的 jsfiddle

Answer 2

这包含margin和width: 100%。

.grid{width:100%; margin-left:10px;margin-right:10px;}

您需要确保计算它。因此，请提供padding并将box-sizing设为border-box：

.grid{width:100%; padding-left:10px;padding-right:10px;box-sizing:border-box;}

小提琴：http://jsfiddle.net/o7pfjv3w/1/

响应中的CSS宽度问题

2 个答案: