css - 对齐标签＆amp;文本框位于页面右侧

Question

我在html表单中创建了4列网格。我想让最后一个标签和文本框字段与页面右侧对齐。

我尝试使用float:right属性，但似乎无法正常工作

在小提琴示例中，它不是单行。

    .row {
        margin: 10px;
    }

    .elements {
        padding: 10px;
        margin-left: 50px;
        margin-top: 10px;
        border-bottom: ridge;
        border-bottom-color: #1f6a9a;
        padding-left: 0;
    }

    .field {
        font-size: 15px;
        color: #b6d6ed;
    }

    label {
        display: inline-block;
    }

    input {
        background-color: transparent;
        border: 0px solid;
        height: 25px;
        width: 60px;
        color: #b6d6ed;
        text-align: center;
    }
    
    /* I Tried Below Line to Right Align */
    
    .row > .elements:nth-child(2) {
        float:right;   
    }

    <div class="row">
        <span class="elements">
            <label class="field" for="Title">Title</label>
            <input id="Title" name="Title" type="text">
        </span>
        <span class="elements">
            <label class="field" for="DateOfBirth">Date of Birth</label>
            <input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker">
        </span>
    </div>

jsfiddle

Answer 1

将第一个span浮动到左侧：

.row > .elements:first-child {
    float: left;
}

请在此处查看：http://jsfiddle.net/3DtqB/2/

Answer 2

您必须将elements类放入<div class=".."></div>并添加CSS命令

.elements {
    float: right;
    margin-top: -[x]px
}

此外，你应该使用两个id而不是像left_box和right_box这样的类元素，并将命令添加到右侧框中。

Answer 3

简单修复，只需将white-space:nowrap;添加到.elements类。