javascript - 如何让这些按钮向右浮动并垂直对齐一些垂直间距

Question

下面是我的代码。

带有当前代码的按钮显示在底部，而我希望它们以垂直方式显示在最右边的位置。下面是我的代码

<div class= "container-fluid">
    <div class = "row">
        <div class = "col-sm-2">
        </div>

        <div class = "col-sm-8">
            <div name="visList">
                <div name="dispTestList">
                    <div class = "panel" >
                        <div class="panel-body">
                            <div class="row">
                                <div name="col-sm-2"><h4>ABC HEADING</h4>
                                </div>
                                <div name="col-sm-4">
                                    Desc1 : <span>Random Desc</span> | Desc 2 : 
                                    <span>Some Random</span> | Desc3 : <span>Random Desc</span> | Desc 4 : 
                                    <span>Some Random</span>
                                </div>
                                <div name="buttonSection" class="col-sm-6">
                                    <div class="pull-right">
                                        <a class = "btn btn-success" style="margin-top: 1%;">Take Test</a>
                                        <a class="btn btn-success">View Result</a>
                                        <a class="btn btn-success">View Answers</a>
                                    </div>
                                </div>
                            </div> <!-- Row -->
                        </div> <!-- Panel Body -->
                    </div> <!-- Panel -->

                </div>
            </div> <!-- visible the section -->
        </div> <!-- col-sm-8 -->

        <div class = "col-sm-2">
        </div>

    </div> <!-- Row -->
</div> <!-- container fluid -->

js fiddle 是这个http://jsfiddle.net/DashmeetSingh/k6EUK/

我希望按钮像下面的网页一样显示。

http://www.starsports.com/cricket/tour/tourid=160/schedule/index.html

Answer 1

要将按钮对齐到右侧，请尝试:div.pull-right { float: right; }。如果您希望按钮垂直堆叠，您也可以将它们放在列表中。

<div class="pull-right">
    <ul class="buttons">
        <li><a class = "btn btn-success" style="margin-top: 1%;">Take Test</a></li>
        <li><a class="btn btn-success">View Result</a></li>
        <li><a class="btn btn-success">View Answers</a></li>
    </ul>
</div>

(要删除元素符号点，您可以像这样使用列表样式速记 CSS:ul.buttons { list-style: none }。)