不少人都有网购的经验，但有时会遇到网页排版不整齐、条目过于集中、信息过于杂乱等问题，这让我们难以快速浏览、挑选商品，也让网页失去了美感。在这种情况下，display:block可以为我们提供一种简单而有效的解决方案。

那么，什么是display:block？

display是CSS中一个重要的属性，用于控制元素在布局时表现的方式。而display:block指的就是元素在水平方向上延伸到与其父元素一致的宽度，垂直方向上则单独占据一行。这个属性可以让网页中的元素更加整齐有序。

下面是一些使用display:block可以优化的网页布局问题：

1、按钮和链接的布局

如果你希望网页上的按钮和链接能够整洁地排列，那么可以将它们的显示属性设置为block。这样，每个链接和按钮都将独占一行，只要通过margin和padding来调整间距和对齐方式即可。

例如，若要将一组链接从左到右分别显示在不同的行上，可以使用以下代码：

```

a {

display: block;

float: left;

margin-right: 10px;

}

```

这将为所有链接创建块级元素并使其向左浮动，同时设置每个链接之间的10像素的距离。

2、列表的布局

无序列表和有序列表是网页中很常见的元素之一，但如果它们的布局不当，则可能会影响用户体验。

假设你正在设计一个电影排行榜的页面，每一部电影都应该有一个海报图和一些简介信息。你可能首先想到使用无序列表和li标签。

```

• 电影1海报
• 电影1简介
• 电影2海报
• 电影2简介

```

但是，如果你用display:block的方式排布，可以得到更美观适合手机端的效果：

```