我想给我正在工作的网站添加一些按钮，每个按钮都可以把你带到另一个页面。 我只是使用图像并添加了一个超链接到它们，并使用浮动对齐它们。 我想可能是文本，但我不确定，因为我对使用HTML和CSS相当陌生。 结果是这样的:但是结果是这样的:左边最后一个按钮没有对齐
我的HTML打印在这里:
null
* {
box-sizing: border-box;
}
body {
background: url('realheckindoggopupper.png')
}
div {
padding: 5px;
background-color: black;
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 1px;
}
.row::after {
content: "";
clear: both;
display: table;
}<div>
<body style="background-color:black">
<h1 style="color:blue;text-size:50px;">Welcome to the Mamiya Mansion!</h1>
<p style="color:white;">
This is a place where I put all my thoughts. I talk about all my different interests here, from retrogaming, to retro-anime, linguistics, and philosophy. I don't have much here yet, more is on the way (including better CSS!), <br> but these buttons
will allow you to access different parts I'm working on. </br>
</p>
</div>
<div class="row">
<div class="column">
<a href="retrostuff.html">
<img src="retrostuff.png" style="width:100%;">
</a>
</div>
<div class="column">
<a href="creations.html">
<img src="creations.png" style="width:100%;">
</a>
</div>
<div class="column">
<a href="pseudstuff.html">
<img src="pseudstuff.png" style="width:100%;">
</a>
<div class="column">
<a href="misc.html">
<img src="misc.png" style="width:200%;">
</a>
</div>
</div>null
正如Guy Incognito在评论中指出的，您的最终div嵌套在前一个div中。 请尝试以下操作:
<div class="row">
<div class="column">
<a href="retrostuff.html">
<img src="retrostuff.png" style="width:100%;">
</a>
</div>
<div class="column">
<a href="creations.html">
<img src="creations.png" style="width:100%;">
</a>
</div>
<div class="column">
<a href="pseudstuff.html">
<img src="pseudstuff.png" style="width:100%;">
</a>
</div>
<div class="column">
<a href="misc.html">
<img src="misc.png" style="width:100%;">
</a>
</div>
</div>
