均勻分布按鈕

Question

這可能是一個相當容易的操作，但是我很累。 如何均勻地水平分布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;
}

Answer 1

試試看（將CSS float:left; margin-right:10px;到按鈕元素中。

的jsfiddle

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以清除上述按鈕的浮點數：

<div style="clear:both;"></div>

Answer 2

如果要平均分配它們並使它們居中，則應給父元素一個text-align: center和子元素（這些按鈕）一個display: inline-block屬性。

像這樣： http : //jsfiddle.net/Mfd4r/2/

這會有所幫助： http : //css-tricks.com/centering-list-items-horizo​​ntally-slightly-trickier-than-you-might-think/