2

我试图简单地将一组文本和<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 上。下部输入（“End”）突出到上部输入的右侧。没有理由发生这种情况。

如果您同时拥有这两种浏览器，则可以在我上面发布的 jsfiddle中查看。

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

4

4 回答 4

2

您可以简单地更改<br/>为<p>，它将起作用。

http://jsfiddle.net/Jd7PR/

于 2012-07-19T22:57:18.583 回答
1

你做的很好，只需<br />在上面的行中移动input:

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

jsFiddle 演示

而已！

于 2012-07-19T23:09:39.253 回答
1

这是我给你的演示。好像chrome不喜欢</br>

演示

于 2012-07-19T22:56:14.477 回答
0

你需要在一个div上同时拥有一个类和一个id吗？（我不想说你不应该因为我不确定，但我以前没有遇到过）

您可以为每个输入提供一个类/id，然后将该类/id 的 css 设置为：float:right; - 或者，您可以使用位置：绝对；- 就个人而言，我会将两对放在父 div 中并使用 display:inline; 和浮动：对；在父 div 上。

于 2012-07-19T23:15:20.123 回答