text-align: right has margin or buffer in Chrome

问题

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?

回答1:

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!

回答2:

you can simply change <br/> to <p> and it will work.

http://jsfiddle.net/Jd7PR/

回答3:

Here's my demo for you. Seems like chrome didn't like the </br>

DEMO

回答4:

Do you need to have both a class and an id on one div? (I don't want to say you shouldn't because I'm not sure about that, but I haven't encountered that before)

You could give each input a class/id and then set the css for that class/id as: float:right; - Alternatively you could use position:absolute; - Personally, I would put both pairs in parent divs and use display:inline; and float:right; on the parent divs.

来源：https://stackoverflow.com/questions/11570447/text-align-right-has-margin-or-buffer-in-chrome

标签

html

css

cross-browser