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にあります。下の入力（「終了」）は、上の入力の右側に突き出ています。これが起こるべき理由はありません。

両方のブラウザをお持ちの場合は、上記のjsfiddleで確認できます。

これはChromeのCSSエンジンのバグですか？私が気付いていないことが起こっていますか？

4

4 に答える 4

2

<br/>に変更するだけ<p>で機能します。

http://jsfiddle.net/Jd7PR/

于 2012-07-19T22:57:18.583 に答える
1

これが私のデモです。クロムが好きではなかったようです</br>

デモ

于 2012-07-19T22:56:14.477 に答える
1

あなたはそれをすべてうまくやっています、ちょうど<br />：の後にスペースなしで上の行で移動してinputください：

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

jsFiddleデモ

それでおしまい！

于 2012-07-19T23:09:39.253 に答える
0

1つのdivにクラスとIDの両方が必要ですか？（私はそれについてよくわからないので、あなたがそうすべきではないと言いたくありませんが、私は以前にそれに遭遇したことがありません）

各入力にクラス/IDを指定してから、そのクラス/ IDのcssを次のように設定できます。float：right; -または、position：absolute;を使用することもできます。-個人的には、両方のペアを親divに配置し、display：inlineを使用します。そしてfloat：right; 親divに。

于 2012-07-19T23:15:20.123 に答える