2013-03-28 101 views
0

我剛剛開始使用網絡,我的第一個任務之一是修復一些跨瀏覽器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中,文本閱讀並重讀自動換行,這使得單選按鈕和文本不能在同一行。我想知道爲什麼會發生這種情況。我玩了一段時間,我看到我可以爲每個硬編碼一些最小寬度,但對我來說這似乎不是一個「最佳」解決方案。有什麼想法嗎?提前致謝!

+0

''輸入'裏面的'標籤'是正確的。 – 2013-03-28 04:39:45

+0

@DipeshParmer:我相信這很好,但在標籤之外添加輸入標籤可能更好。有哪些更好的意見存在分歧。這個想法是建立語義語境,但我不同意這樣做。使用匹配的ID是建立語義(和邏輯)上下文的另一種方式。 – 2013-03-28 04:41:27

+0

@DipeshParmar是將輸入放置在標籤內是有效的HTML。 – 2013-03-28 04:41:34

回答

-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它是一個標籤。

1

使用CSS white-space屬性:

label { 
    white-space: nowrap; 
} 
0

你可以把你的風格的細節?包裝不是自動的,除非你有其他元素或樣式規則強制它包裝