Question

我有一个问题，我认为可能是非常愚蠢的，但我无法弄明白。我有一个表单，我想在两侧对齐元素，问题是我无法将它对齐到右边（红线所在的位置），这是一张图片来显示它：

form alignment wrong

这是我的SASS（对不起，如果不是很整洁，我已经工作了一段时间，可能会很乱）：

.contact {
margin: 100px auto 0;
max-width: $half-width;
form {
    letter-spacing: 2px;
    color: $color4;
    input, textarea {
        border: 3px solid $color5;
        padding: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 16px;
        background: $color6;
        &:focus {
            outline: none !important;
            border-color: $color3 !important;
        }
        textarea {
            height: 10em;
            width: 100%;
            overflow: inherit;
        }
    }
    .info-group {
        margin-top: 10px;
        label {
            display: inline-block;
            width: 45%;
            float: left;
            &:nth-child(2) {
                float: right !important;
                margin: 0 auto;
            }
        }
    }
    .tell-group {
        width: 100%;
        label {
            display: inline-block;
            margin-top: 10px;
        }
        textarea {
            height: 10em;
            width: 100%;
            float: left;
        }
    }
    .submit-wrap {
        margin-top: 10px;
        float: right;
        input {
            width: 100px;
            font-size: 18px;
            text-transform: uppercase;
            color: $color6;
            background-color: $color5;
            border: none;
            &:hover {
                color: $color1;
            }
        }
    }
}
}

谢谢！

Answer 1

padding: 10px;将增加20px的宽度，这个额外的宽度可能是造成问题的原因。您可以将width属性更改为width: calc(100% - 20px);，以考虑元素每一侧的10px填充。

以下是支持calc的位置列表：http://caniuse.com/#feat=calc

您还可以尝试将这些css规则添加到问题元素中以移动它们：

position: relative;
left: -20px;

您可能还需要将position: relative;添加到父元素

这是一个显示left -20px方法的小提琴：http://jsfiddle.net/0f153w8e/

旁注：如果您的文字区域有边框（他们可能会这样做），您可能需要稍微调整left金额以使其准确无误

Form元素中的右对齐错误

1 个答案: