这可能是一个相当简单的问题,但我受够了。如何水平均匀分布 3 个图像按钮?
<div id="mainwrapper">
<div id="box-1" class="box">
<img id="image-1" src="images/1.jpg"/>
<span class="caption simple-caption">
<div class="minibuttonR"><a href="index.html" onClick=""></a></div>
<div class="minibuttonC"><a href="index.html" onClick=""></a></div>
<div class="minibuttonL"><a href="index.html" onClick=""></a></div>
</span>
</div>
</div>
</div>
</div>
CSS
#mainwrapper .minibuttonL {
background-image: url(images/bu_spec.jpg);
background-repeat:no-repeat;
padding: 40px;
}
#mainwrapper .minibuttonC {
background-image: url(images/bu_zoom.jpg);
background-repeat:no-repeat;
padding: 40px;
}
#mainwrapper .minibuttonR {
background-image: url(images/bu_ok.jpg);
background-repeat:no-repeat;
padding: 40px;
}
最佳答案
试试这个(将 CSS float:left; margin-right:10px;
添加到按钮元素。
CSS
#mainwrapper .minibuttonL, #mainwrapper .minibuttonC, #mainwrapper .minibuttonR {
background-repeat:no-repeat;
padding: 40px; float:left; margin-right:10px;
}
#mainwrapper .minibuttonL {
background-image: url(images/bu_spec.jpg);
}
#mainwrapper .minibuttonC {
background-image: url(images/bu_zoom.jpg);
}
#mainwrapper .minibuttonR {
background-image: url(images/bu_ok.jpg);
}
在按钮之后添加这个小 div 来清除上面按钮的 float :
<div style="clear:both;"></div>
关于html - 均匀分布按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20649353/