1

我正在使用一个表格和一个 div 来创建一个居中的按钮组......但由于某种原因，我的按钮对齐很奇怪？这是问题的一个jsfiddle。提琴手

有什么办法可以解决这个问题，我可以添加更多按钮并让它们直截了当？如果需要更多代码，请询问我，我会发布。

这是我的html：

 <div align = "center" class="bdy">

        <table class="wrapper">

            <tr>

                <td>

                    <button type="button">Services</button>

                    <br>

                    <button type="button">Live</button>

                </td>


            </tr>

        </table>

    </div>​

我的 CSS 在小提琴上！

4

4 回答 4

2

摆脱<br>按钮之间为我修复了它。

于 2012-09-08T03:49:48.157 回答
2

我通过删除按钮之间的空格来修复对齐，但这不是正确的方法。

固定版本（仅供参考）：http: //jsfiddle.net/J7rYF/1/

表格不应该用于布局按钮。div align=center已弃用。<br>不应该用于这种类型的格式化目的。

如果你想要一个开箱即用的示例/解决方案，Twitter Bootstrap有一些非常好的示例和模板。

或者，这是一个简单的模板，您可以从它开始将按钮列表居中：http: //jsfiddle.net/J7rYF/10/

HTML

<div class="button-set">
    <ul>
        <li><button type="button">Services</button></li>
        <li><button type="button">Live</button></li>
    </ul>
</div>

CSS

.button-set {
   width: 300px;
   margin: 0 auto; /* this centers the element */       
}

.button-set UL {
    list-style: none; /* removes bullets */  
}

/* this controls spacing between adjacent buttons */
.button-set LI + LI {   
    margin-top: 4px;
}

/* width: 100% is needed...everything else is optional */
BUTTON {
    width: 100%;
    border: 1px solid #000;
    padding: 4px;
    border-radius: 4px;
    color: #fff;
    background-color: #006DCC;
}

​</p>

于 2012-09-08T03:49:55.023 回答
0

你给margin:0;按钮 css 和.button-set ul li{margin:0}

于 2012-12-27T11:09:50.237 回答
-1

您可以在该 td 和新表中添加另一个表，您可以放置​​这两个按钮

于 2012-09-08T14:46:30.200 回答