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“clear”，如下所示：

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

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

WordPress文本小部件中的按钮无法正常运行

1 个答案: