表单元素中的右对齐错误

Question

我有一个问题，我认为这可能很愚蠢，但我想不通。 我有一个表格，我想对齐两边的元素，问题是我不能把它对齐到右边（红线所在的地方），这是一张图片来展示它：

这是我的 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 的数量，以使其准确地确定您的文本区域是否有边框（它们可能有）