WordPress 文本小部件中的按钮无法正常工作

Question

我正在尝试制作两个按钮来过滤博客中的类别并将它们放在我网站的侧边栏中。所以我将整个代码、样式和 html 放入一个小部件中。它们是带有图像和悬停的简单链接。 但不知何故，按钮出现在侧边栏中下一个小部件的标题栏中。

代码如下：

<style>
a.filtro{
display:block;
width: 100px;
height: 100px;
float: left;
margin: 5px ;
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-02.png");
background-size:cover;
}

a.filtro:hover{
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-02.png");
background-size:cover;
}

a.filtro2{
display:block;
width: 100px;
height: 100px;
float: left;
margin:5px;
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro-03.png");
background-size:cover;
}


a.filtro2:hover{
background: url("http://www.tk.gvdgvd.net/wp-content/uploads/2014/04/tokooblog_filtro_sel-03.png");
background-size:cover;
}
</style>


<a href="http://www.tk.gvdgvd.net/?cat=25" class="filtro"></a>

<a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro2">
</a>

我在 css 中尝试了很多东西，但我无法修复它，但仍然是一种非常奇怪的行为。 我猜新代码正在覆盖 style.css 中的某些内容，但我不知道是什么。

Answer 1

尝试在以下类上放置一个浮点数：

.main .sidebar .widget {
    float: left; //added float here
    margin-bottom: 35px;
}

当您在另一个 div 中浮动 div 时，您需要浮动父 div 或在最后一个浮动元素下方放置一个 div“清除”，如下所示：

<a href="http://www.tk.gvdgvd.net/?cat=10" class="filtro2"></a>
<div style="clear: both;"></div>

否则你会得到你现在看到的溢出。