Question

以下是我的登录面板的代码。我想对齐它。

<div class="col-sm-3">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span class="glyphicon glyphicon-log-in"></span> 
                Log In
            </h3>
        </div>
    <div class="panel-body" >
        <form>
            <div class="form-group">
                <input type="text" class="form-control" id="uid" name="uid" placeholder="Username">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password">
            </div>
                <button type="submit" class="btn btn-default">Log In</button>
        </form>
    </div>
</div>

Answer 1

好像你正在使用Bootstrap。如果是这样，您可以将“向右拉”或“右对齐”类添加到面板中，看它是否符合您的需求。此外，最好记住面板周围的代码可能会改变这些类的行为方式。如果你提供更多细节（小提琴会有所帮助），我很乐意在这个答案上增加。

您还可以在此链接上查看有关帮助程序类的更多信息：https://getbootstrap.com/docs/3.3/css/#helper-classes

Answer 2

您可以向父div添加其他类“right-align”

<div class="panel panel-default right-align">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span class="glyphicon glyphicon-log-in"></span> 
                Log In
            </h3>
        </div>
        <div class="panel-body" >
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" id="uid" name="uid" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-default">Log In</button>
            </form>
        </div>
    </div>

并添加

.right-align{
  float: right;
 }

在你的css文件中。

或者，发布包含父div的标记以更好地理解问题。

我该如何对齐以下面板？

2 个答案: