爲什麼HTML控件在以下網頁包裹時，瀏覽器調整

下面是一個簡單的HTML頁面的代碼。
儘管容器樣式中存在溢出和空白設置，但當頁面重新調整大小時，控件將自動換行。我正在Chrome瀏覽器中測試。爲什麼HTML控件在以下網頁包裹時，瀏覽器調整

似乎加入了浮來解決：離開也到容器的風格。但我很好奇爲什麼首先發生這個包裹？我真的不想將容器漂浮到左邊，因爲它可能會導致其他併發症。

#container { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.tmplLabelHorizontal { 
 
    float: left; 
 
} 
 

 
.tmplLabelHorizontalWithLeftSpacing { 
 
    float: left; 
 
    margin-left: 30px; 
 
}

<div id="container"> 
 

 
    <div id="tmplTabShiftPanelRow1"> 
 

 
    <label class="tmplLabelHorizontal">Start Time:</label> 
 

 
    <div style="float:left"> 
 
     <input maxLength="8" style="width:60px; " type="text" /> 
 
    </div> 
 

 
    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label> 
 

 
    <div style="float:left"> 
 
     <input maxLength="8" style="width:60px; " type="text" /> 
 
    </div> 
 

 
    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label> 
 

 
    <div style="float:left"> 
 
     <input maxLength="8" style="width:60px; " type="text" /> 
 
    </div> 
 

 

 
    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label> 
 

 
    <div style="float:left"> 
 
     <input maxLength="8" style="width:60px; " type="text" /> 
 
    </div> 
 

 

 
    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label> 
 

 
    <div style="float:left"> 
 
     <input maxLength="8" style="width:60px; " type="text" /> 
 
    </div> 
 

 
    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label> 
 

 
    <div style="float:left"> 
 
     <input maxLength="8" style="width:60px; " type="text" /> 
 
    </div> 
 

 
    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label> 
 

 
    <div style="float:left"> 
 
     <input maxLength="8" style="width:60px; " type="text" /> 
 
    </div> 
 

 

 
    <label class="tmplLabelHorizontalWithLeftSpacing">Start Time:</label> 
 

 
    <div style="float:left"> 
 
     <input maxLength="8" style="width:60px; " type="text" /> 
 
    </div> 
 

 

 

 
    </div> 
 

 
</div>

來源

2013-05-09 Jubin Jose

你有沒有嘗試過的風格

word-wrap: normal;

來源

2013-05-09 04:06:20

white-space影響內聯元素和文本，而不是浮動元素。

嘗試使用display:inline-block代替float:left。

來源

2013-05-09 04:07:09

正確的方法是包裝一樣，在div裏面的標籤。

<div id="container"> 
    <div id="tmplTabShiftPanelRow1"> 
     <div style="float:left"> 
      <label class="tmplLabelHorizontal">Start Time:</label> 
      <input maxLength="8" style="width:60px; " type="text" /> 
     </div> 
    </div> 
</div>

來源

2013-05-09 04:09:22

應用浮動：左爲我的作品就像我說的。但我的問題是，如果有不同的方式來實現這一點，而不是漂浮容器？ – 2013-05-09 04:19:59

我編輯了這個例子，你不是浮動容器，你只是包裝標籤並一起輸入，所以如果屏幕大小改變，他們將一起移動，不會分裂。 – 2013-05-09 11:59:30

Div是塊元素。所以如果你不指定任何float值，這些將不會被包裝。一個解決方案，使div包裝是添加display: inline或display:inline-block，以便他們不會像塊元素。

那麼另一種解決方案是使用spans，而不是divs如果你不需要申報單。跨度不是塊元素，因此它們會自動換行。

來源

2013-05-09 05:50:40 Narendra

爲什麼HTML控件在以下網頁包裹時，瀏覽器調整

回答

相關問題