0

Web を始めたばかりで、最初のタスクの 1 つはクロス ブラウザーの UI の問題を修正することです。Firefox および Internet Explorer では、このコードは問題なく表示されます。

<div id="readTypeBtns" style="text-align: left;margin-left: -30px">
    <label class="radio inline">
    <input value="First Read" id="firstread" type="radio">First Read</label>
    <label class="radio inline">
    <input value="Second Read" id="secondread" type="radio">Second End</label>
</div>

Chrome でこれを見ると、First Read と Second Read のテキストが折り返され、ラジオ ボタンとテキストが同じ行に表示されません。なぜこれが起こるのか疑問に思っていました。少し遊んでみたところ、それぞれの最小幅をハードコーディングできることがわかりましたが、それは私にとって「最良の」解決策のようには思えませんでした。何かご意見は？前もって感謝します！

4

3 に答える 3

1

CSSの空白プロパティを使用します。

label {
    white-space: nowrap;
}
于 2013-03-28T04:42:15.700 に答える
0

スタイルの詳細を教えてください。ラップを強制する他の要素またはスタイル ルールがある場合を除き、ラップは自動ではありません。

于 2013-03-28T05:33:52.083 に答える
-1

コードを次のように変更してみてください。

<div id="readTypeBtns" style="text-align: left;margin-left: -30px">
    <label class="radio inline" for="firstread">First Read</label>
    <input value="First Read" id="firstread" type="radio">
    <label class="radio inline" for="secondread">Second End</label>
    <input value="Second Read" id="secondread" type="radio">
</div>

基本的に<label></label>、入力を含むべきではありませんが、ラベルである入力のfor=""を含む属性を含める必要があります。id

于 2013-03-28T04:41:44.370 に答える