text-align：right在Chrome中有边距或缓冲区 [英] text-align: right has margin or buffer in Chrome

问题描述

我试图简单地将一组文本和< input> 元素对齐到右侧，以便输入的左侧始终对齐位置（它们的宽度相同，所以实际发生的是右侧与容器右侧对齐），标签文本的左侧是锯齿状。

这里是HTML和CSS（也在此jsfiddle ）：

HTML：

 < div id =pullthrough-control-panel> 
< div class =float-l right-textid =pullthrough-range-panel> 
< h3 class =center-text>日期范围< / h3> 
开始：< input type =textname =rangestart/> 
< br /> 
结束：< input type =textname =rangeend/> 
< / div> 
< / div> 
  

CSS：

 code> .float-l {
 float：left; 
} 
 
 .right-text {
 text-align：right; 
} 
 
 .center-text {
 text-align：center; 
} 
 
＃pullthrough-control-panel {
 height：6em; 
 padding：.25em; 
} 
  

就是这样。现在，当我尝试跨页面浏览器时，真正的问题发挥作用。像往常一样，Firefox按预期工作。问题是Chrome。下部输入（End）伸出到上部输入的右侧。

如果你有两个浏览器，你可以查看在jsfiddle 上面发布。

这是Chrome的CSS引擎中的错误吗？有没有发生我不知道的事情？

解决方案

/ strong>移动输入后的< br /> >



 开始：< input type =textname =rangestart/>< br / 
结束：< input type =textname =rangeend/> 
  





jsFiddle demo

就是这样！

I'm trying to simply align a set of text and <input> elements to the right, so that the left side of the inputs always aligns at the same location (they are the same width, so what's really happening is the right side is aligned to the right side of their container), and the left side of the label text is jagged.

It's not ideal for a large form, but for what I need, it looks better that way.

Here's the HTML and CSS (also at this 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;
}

That's it. Now, the real problem comes into play when I try to go cross-browser with the page. As usual, Firefox works as expected. The problem is with Chrome. The lower input ("End") juts out to the right of the upper one. There's no reason this should be happening.

If you have both browsers, you can check it out at the jsfiddle I posted above.

Is this a bug in Chrome's CSS engine? Is there something happening that I'm not aware of?

解决方案

You're doing it all fine, just move the <br /> in the upper line without spaces after the input:

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

jsFiddle demo

That's it!

这篇关于text-align：right在Chrome中有边距或缓冲区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！