有沒有辦法創建可選的換行符而不使用float？

我有一個包含幾個輸入，其中一些旁邊另一個定位而有些則是在新行的web表單。其中的例子所示：有沒有辦法創建可選的換行符而不使用float？

<h3>Max and Min Value</h3> 
Max: <input name=max_value type=number>* Min: <input name=min_value type=number> 

<h3>Overall Value</h3> 
Overall: <input name=overall type=number>

我想定位max_value和min_value使得它們在同一行，如果瀏覽器窗口足夠寬，否則突破到一個新行*位置。我明白，我可以通過將它們封裝在包裝元素中並使用float:left來完成這兩項任務。但是這將影響整個文件的流動，除非我引入額外的間隔元素。

有用來創建而不影響文檔的流程可選換行的另一種方式？

來源

2012-07-19 Question Overflow

使用inline-block的風格來把單元分組到子組。請參閱下面的答案。 – Nish 2012-07-19 10:45:49

結束語您Min輸入一個div並指定display: inline-block應該做的伎倆：

<h3>Max and Min Value</h3> 
Max: <input name=max_value type=number>* <div style="display: inline-block">Min: <input name=min_value type=number></div> 

<h3>Overall Value</h3> 
Overall: <input name=overall type=number>

來源

2012-07-19 10:36:29 James

這太棒了！不知道它可能如此簡單。謝謝！ – 2012-07-19 10:40:07

您可以使用white-space: nowrap保持輸入和標籤一起：

<html> 
<head> 
    <style type="text/css"> 
    label { white-space: nowrap; } 
    </style> 
</head> 
<body> 
    <h3>Max and Min Value</h3> 
    <label>Max: <input name=max_value type=number>*</label> <label>Min: <input name=min_value type=number></label> 
</body> 
</html>

來源

2012-07-19 10:41:15 mogelbrod

不Chrome瀏覽器工作/火狐 – James 2012-07-19 10:44:39

這是奇怪的，我用的Firefox（V13），以驗證它的工作。編輯：也在Chrome中測試它，它似乎工作。 – mogelbrod 2012-07-19 10:45:45

是的，這也適用。謝謝！ – 2012-07-19 10:45:58

你可以禁止換行符用css：

.nobr { white-space:nowrap; }

所以最後的代碼如下所示：

<h3>Max and Min Value</h3> 
<span class="nobr">Max: <input name=max_value type=number></span> <span class="nobr">Min: <input name=min_value type=number></span> 

<h3>Overall Value</h3> 
Overall: <input name=overall type=number>

來源

2012-07-19 10:42:22

+1適用於所有最新版本的Chrome/FF + IE。 – James 2012-07-19 10:49:45

我認爲你需要做的唯一事情是，浮動的新的包裝元素左邊，clear: left（或both）的<h3>標籤後。這應該夠了吧。

來源

2012-07-19 10:43:28

<style type='text/css'> 
.block 
{ 
display:inline-block; 
padding-left:5px; 
margin:5px 0px; 
} 
</style> 

<h3>Max and Min Value</h3> 
<div class='block'>Max: <input name=max_value type=number></div><div class='block'> Min: <input name=min_value type=number></div> 


<h3>Overall Value</h3> 
Overall: <input name=overall type=number>

希望這對你有用。

來源

2012-07-19 10:44:40 Nish

有沒有辦法創建可選的換行符而不使用float？

回答

相關問題