我想制作一个与此类似的页面。我希望此页面上的所有内容在页面的最左侧和最右侧都有边距。我应该在我的代码中添加什么？
我现在拥有的代码将使段落适合我不喜欢的网页的宽度。
1 回答
1
你应该为你的内容创建一个全局容器，给它一个 amax-width然后将它的边距设置为0 auto。
您可以尝试全屏查看以下代码段；因为我告诉.container班级的最大宽度为600px，所以左右边距将自动分配剩余的可用空间以使内容居中margin: 0 auto
.container {
max-width: 600px;
margin: 0 auto;
}<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quo a repellat consequuntur sapiente distinctio, voluptate hic facilis veritatis impedit sed sunt delectus blanditiis soluta tempore cupiditate fugiat ut excepturi accusantium harum neque
eius ex! Ipsum, ratione. Natus, veritatis et vitae, sint explicabo cum iusto, provident laudantium culpa consectetur corrupti exercitationem deserunt hic error quibusdam. Similique officia tenetur suscipit voluptatum hic maiores, eum possimus, aspernatur
fugit ad porro sequi? Assumenda impedit maiores, consectetur beatae expedita in libero! Officia modi officiis harum ratione consectetur, doloribus molestiae, quam animi possimus similique, recusandae a deserunt tenetur aliquam fuga! Modi reprehenderit
placeat natus a laborum nihil voluptatum facere, alias aliquid dolor velit minus libero, corrupti fuga tenetur sapiente est, quo explicabo consequatur? Repellat, adipisci ipsa, saepe praesentium odio, consequatur quia temporibus nemo tempora illo
suscipit beatae. Voluptates corporis, ipsa officiis, ex accusamus assumenda dolor debitis perferendis voluptas quo quisquam tenetur molestias pariatur doloremque dolorem.
</p>
</div>于 2019-04-16T18:25:57.080 回答