按钮对齐问题？
按钮对齐问题？
提问于 2012-09-08 11:46:23
我正在使用一个表格和一个div来创建一个居中的按钮group...but，由于某种原因，我的按钮对齐方式很奇怪？下面是这个问题的摘要。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
Stack Overflow用户
回答已采纳
发布于 2012-09-08 11:49:55
我通过删除按钮之间的空格修复了对齐，但这不是正确的方法。
固定版本(仅供参考)：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;
}
Stack Overflow用户
发布于 2012-09-08 11:49:48
去掉按钮之间的<br>为我修复了它。
Stack Overflow用户
发布于 2012-12-27 19:09:50
你在按钮css和.button-set ul li{margin:0}上给margin:0;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12327839
复制相关文章
相似问题
腾讯云开发者
