如何让这些按钮浮动正确,垂直对齐与一些垂直间距

How to get these buttons float right and vertically aligned with some vertical spacing

本文关键字:垂直 对齐 按钮      更新时间:2023-09-26

下面是我的代码。

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

<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的小提琴是这个http://jsfiddle.net/DashmeetSingh/k6EUK/

我想让按钮像下面的网页一样显示。

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

要将按钮对齐到右侧,请尝试: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 })