html - bootstrap - 按钮未正确对齐

Question

我有一个带有这个类的ul，里面"nav nav-tabs nav-stacked"有一个li和a "<a>"，里面"<a>"有两个带有类的按钮"pull-right btn btn-primary"。发生的事情是按钮粘在列表项的底部，我希望它们位于列表项的中间。

如需更多许可，请参阅：

HTML 代码：

<div class="container-fluid">
    <div class="row-fluid">
        <ul class="nav nav-tabs nav-stacked" style="margin-top: 60px;">
            <?php
            $all_connections = get_user_connection_requests($_SESSION["uid"]);
            while($connection = mysql_fetch_assoc($all_connections)) {
                echo "<li><a>{$connection["fName"]} {$connection['lName']}"
            ?>
            <button class="pull-right btn btn-primary ">Accept</button>
            <button class="pull-right btn btn-danger ">Deny</button>
            <?php echo "</a></li>"; }   ?>
        </ul>
    </div>
    <!--/row-->
</div>

输出：

全尺寸图片在这里！

我希望按钮也像文本一样位于中间。

我怎样才能做到这一点？

任何帮助将不胜感激！:)

Answer 1

试试这个：

<style>
    .button-group{margin-top:-5px}
</style>
<div class="container-fluid">
    <div class="row-fluid">
        <ul class="nav nav-tabs nav-stacked" style="margin-top: 60px;">

            <li>
                <a>
                    Mohammad Danish
                    <div class="pull-right button-group">
                        <button class="btn btn-primary ">Accept</button>
                        <button class="btn btn-danger ">Deny</button>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!--/row-->
</div>

Answer 2

我对您的代码进行了一些更改，因为浮动元素会带来一些麻烦。

首先，我将 id 添加#something到ul列表中只是为了解决浮动问题。然后我添加<span class="centered">了在您的锚标记内换行的文本。

这是CSS

#something li a {
    overflow: hidden;
}

.centered {
    display: inline-block;
    margin-top: 5px;
}

这里是编辑过的 HTML

<div class="container-fluid">
    <div class="row-fluid">
        <ul id="something" class="nav nav-tabs nav-stacked" style="margin-top: 60px;">
            <li>
               <a href="">
                  <span class="centered">sssss</span>
                  <button class="pull-right btn btn-primary ">Accept</button>
                  <button class="pull-right btn btn-danger ">Deny</button>
               </a>
            </li>
        </ul>
    </div>
    <!--/row-->
</div>

演示