保鮮包裝元素我共同

在HTML中的幾個要素，我想繼續當他們換分組。我認爲答案在於一些CSS（甚至可能是JavaScript），但我不確定。舉例來說，我已經制定了這樣幾個要素：保鮮包裝元素我共同

<label A><input A><label B><input B><label C><input C>

什麼情況是用戶有時調整瀏覽器窗口，我們結束了這一點：

<label A><input A><label B> 
<input B><label C><input C>

在上面的例子中，輸入B不在其輸入元素旁邊。有沒有辦法將標籤和輸入組合在一起以便它們一起包裝？我已經嘗試過divs，並將這些元素放在一起，放在一張「nowrap」的表格中，結果不一。我不介意包裝線，我只需要將標籤和輸入元素保持在一起。

來源

2012-07-19 Frecklefoot

我知道這是一個古老的，但你可以發佈您的解決方案嗎？ – 2014-08-29 10:22:06

哇，對不起，我剛剛看到你的評論。我沒有這個源，但在下面的答案中嘗試一些東西。這就是我所做的一切。 HTH :) – Frecklefoot 2014-09-17 20:25:30

這也可能是值得考慮的周圍每一對父母設定的div你想保留在一起 - 我知道你說你想這也是給他們一個固定的寬度和顯示：內聯;它應該可以工作

ALSOO include float：left/right;（只選擇一個）這樣，如果瀏覽器窗口太小而不能並排顯示它們，它將取而代之，並將其放到下一行，但應保持所有元素在一起並排。

來源

2012-07-19 16:17:57 Dom

被這個愚弄了，最後得到它。謝謝**噸**！它也解決了頁面遇到的其他渲染問題。 – Frecklefoot 2012-07-19 19:46:37

很高興我可以幫助:) – Dom 2012-07-19 19:50:05

你可以把每個標籤/輸入組中的<span>，然後設置css來display:inline。我很確定這會保持分組。根據您的網站佈局和以前的CSS，您可能需要調整跨度CSS。

來源

2012-07-19 16:15:25

嘗試是這樣的：

<label>First Name: 
    <input type="text"> 
</label> 
<label>Last Name: 
    <input type="text"> 
</label>

，並設置

label { 
    display: inline-block; 
}

演示http://dabblet.com/gist/3145028

替代方案：在<div>與display: inline-block

來源

2012-07-19 16:17:10 Ana

謝謝，安娜！我喜歡這個解決方案：簡單而優雅！再加上一個演示，我可以看到它的行動！不幸的是，它不適合我。此頁面有CSS的TONS，CSS中的其他內容阻止它正常工作。（ – Frecklefoot 2012-07-19 18:34:54

）你能詳細介紹一下嗎？也許可以編輯你的原始問題，當你在回答中嘗試了其他方法時，它的行爲如何。 – Ana 2012-07-19 18:53:33

把包裹都<label>和<input>一在一個div這些元素像這樣的LL：

<div style="white-space: nowrap"> 
    ... 
</div>

來源

2012-07-19 16:17:25

是的，我確實嘗試過，它根本沒有效果。 – Frecklefoot 2012-07-19 17:07:57

既然你說這是在一個表中，這裏也許正是你要找的人：http://jsfiddle.net/DX9G7/

HTML：

<table border="0" cellspacing="0" cellpadding="0"> 
    <colgroup> 
     <col width="30%" /> 
     <col width="30%" /> 
     <col width="40%" /> 
    </colgroup> 
    <tr> 
     <td> 
      <div class="form-row"> 
       <label>A</label> 
       <input type="text" /> 
      </div> 
      <div class="form-row"> 
       <label>B</label> 
       <input type="text" /> 
      </div> 
      <div class="form-row"> 
       <label>C</label> 
       <input type="text" /> 
      </div> 
     </td> 
    </tr> 
</table>

你現在可以按照你想要的方式修改你的css。

來源

2012-07-19 16:17:49 AdityaSaxena

簡單的答案是包裝元件到具有顯示另一元件：直列塊作爲樣式。所以......

<span class='wrapper'> 
    <span class='left-side'></span> 
    <span class='right-side'></span> 
</span>

而且

.wrapper { 
    display: inline-block; 
}

來源

2015-04-25 15:39:46 MastaBaba

保鮮包裝元素我共同

回答

相關問題