文本对齐：右中有边距或缓冲在Chrome(text-align: right has margin

我想简单地排列的一组文本和<input>元素的权利，这样的投入左侧始终在同一位置对齐（它们是相同的宽度，所以真正的情况是，右侧是对准其容器的右侧），标签文字的左边是参差不齐的。

这不是理想的大形式，但我需要什么，它看起来更好的方式。

这里的HTML和CSS（也这个的jsfiddle ）：

HTML：

<div id="pullthrough-control-panel">
    <div class="float-l right-text" id="pullthrough-range-panel">
        <h3 class="center-text">Date Range</h3>
        Start: <input type="text" name="rangestart" />
        <br />
        End: <input type="text" name="rangeend" />
    </div>
</div>

CSS：

.float-l{
    float: left;
}

.right-text{
    text-align: right;
}

.center-text{
    text-align: center;
}

#pullthrough-control-panel{
    height: 6em;
    padding: .25em;
}

而已。 现在，真正的问题进场时，我尝试去跨浏览器与网页。 像往常一样，按预期工作的Firefox。 问题是与Chrome浏览器。 下侧的输入（“结束”）伸出到上一个的右侧。 没有理由这应该发生。

如果你有两个浏览器，你可以检查出来的的jsfiddle我张贴以上。

这是Chrome的CSS引擎中的错误？ 有什么事发生，我是不知道的？

Answer 1:

你做的这一切很好，只是移动<br />在上线无空格后input ：

        Start: <input type="text" name="rangestart" /><br />
        End: <input type="text" name="rangeend" />

的jsfiddle演示

而已！

Answer 2:

你可以简单地改变<br/>到<p>它会工作。

http://jsfiddle.net/Jd7PR/

Answer 3:

下面是我对你的演示。 好像铬不喜欢</br>

DEMO

Answer 4:

你需要同时拥有一个类和一个DIV的ID？ （我不想说你不应该，因为我不知道这件事，但我还没有遇到过的那个）

你可以给每一个输入一个类/ ID，然后为这个类的CSS / ID为：浮动：权利; - 或者你可以使用的位置是：绝对的; - 就个人而言，我会把这两对在父母的div和使用显示：内联; 和float：右; 父div的。

文章来源: text-align: right has margin or buffer in Chrome