CSS：Div显示设置为阻止，但它们显示为嵌入式

Question

我似乎遇到了一个与其他所有人相反的问题。我希望我的div元素像通常一样在彼此上方显示，因为它们的默认显示为“阻止”，但并非如此。我的div放置在一个较大的div元素内，每个元素仅包含一个链接。

这是它们的显示方式：

我已将div强制为“ display：block”，也已将“ a”标记强制为“ display：block”，但尚未解决问题。实际上，当我检查元素时，显示令人惊讶地设置为“阻止”，但我的div仍然彼此相邻显示。

这里是Html和CSS（请注意，我重复了一些样式以尝试使其工作）：

    .wrapper-div{
	padding: 20px;
	padding-top: 70px;
    }

    .wrapper-div a{
	float: left;
	padding: 4px;
	display: block;
    }

    .wrapper-div div{
	display: block;
	width: 100%;
    }

    .link{
	display: block;
    }

<div class="wrapper-div">
    <div class="link"> <a href="#">Bla1</a></div>
    <div class="link"> <a href="#">Bla1</a></div>
    <div class="link"> <a href="#">Bla1</a></div>
    </div>

这很奇怪，因为我找不到强制div垂直对齐的方法。

Answer 1

.wrapper-div{
padding: 20px;
padding-top: 70px;
}

.wrapper-div a{
float: left;
padding: 4px;
...
display: block;
}

.wrapper-div div{
display: block;
width: 100%;
clear:both;
}

<div class="wrapper-div">
<div class="link"> <a href="#">Bla1</a></div>
<div class="link"> <a href="#">Bla1</a></div>
<div class="link"> <a href="#">Bla1</a></div>
</div>

只需添加clear：both;我指示的地方

Answer 2

我认为您可能对此有过多的想法。

示例

.wrapper-div {
    width: 100%;
    padding: 20px;
    padding-top: 70px
}
    
.link{
    display: block;
    padding: 4px;
}

<div class="wrapper-div">
    <div class="link"> <a href="#">Bla1</a></div>
    <div class="link"> <a href="#">Bla1</a></div>
    <div class="link"> <a href="#">Bla1</a></div>
</div>