html - 对齐 float 内容

Question

我正在使用 Twitter Bootstrap toolkit风格我的网站。我正在使用类似于以下的标记实现拆分按钮下拉菜单。

<div class="btn-group">
    <a class="btn btn-small btn-info" href="#">
        Add New Provider
    </a>
    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</div>

这按预期工作；但是，我想将整个按钮右对齐。但是 btn-group和 btn类都向左浮动，因此忽略任何文本对齐方式。

如果我知道按钮的总宽度，我可以设置外部 <div>到那个宽度并对齐整个 <div>在 parent 中<div> .但我不知道总宽度。

有什么方法可以使这些内容右对齐，而无需重新处理底层的 Bootstrap 类？

注意:我发布了一个 jsFiddle demo

Answer 1

我不能保证这会适用于您的特定用例(因为我自己还没有尝试过，而且我不知道您使用的是什么标记和 CSS)，但这确实适用于你的 jsFiddle 演示:

.panel-container {
    display: inline-block;
    text-align: right;
}