防止「美化」選項卡翻譯爲空格

因此，我們最近將瀏覽器支持政策更改爲IE 8/9，Firefox，Chrome & Windows 7上的Safari，所有這些支持box-sizing: border-box;以某種形式或另一種形式（某些需要前綴，例如-moz-）。這使我們能夠創建寬度爲45em的表格，使用寬度爲21em的標籤和1em的margin-right（在標籤和相關的輸入/選擇之間創建一些空格），然後將選擇/文本輸入設置爲23em。 Textareas是45em，我們使用與文本對齊的div從右到右對齊按鈕。該表格排列完美，無需瀏覽器特定的調整！防止「美化」選項卡翻譯爲空格

然而，當我開始一個新項目時，昨晚我陷入了一個問題。我使用這種技術，但無法使其工作。投入都下降到下一行。我終於弄清楚問題的根源是什麼，但找不到解決方法（我喜歡）。這是我使用的標記：

<div class="input-pair"> 
    <label for="mainBackgroundColor">Background Colour</label> 
    <input type="text" id="mainBackgroundColor" name="mainBackgroundColor" class="text color"> 
</div>

事實證明，回車，我使用，使其更易於閱讀標籤被轉換爲空間。因此，標籤和輸入的實際總寬度是21em + 1em + 23em +一個空格，換句話說是45em +一個空格，但容器只有45em。我嘗試過不同的CSS空白值，但沒有運氣。我真的不想把標籤和輸入放在代碼的同一行上 - 它看起來很可怕，而且不容易閱讀。有沒有人有任何想法如何停止這一新的行，並選項卡，從被替換爲空間？

來源

2013-03-23 ClarkeyBoy

這是一篇不錯的文章：Fighting the Space Between Inline Block Elements。

來源

2013-03-23 13:59:17 darthmaim

謝謝。我沒有足夠的連接點來認識它只是內嵌塊元素。這裏有大量的文章，但所有的解決方案對我來說都顯得有些不可靠。我希望代碼整潔，而不是空的HTML註釋，缺少結束標籤或類似的東西。 :(猜我必須選擇一個 – ClarkeyBoy 2013-03-23 14:14:44

這裏還有另一個關於這些空格的SO問題：[忽略HTML中的空格]（http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html） – darthmaim 2013-03-23 14:26:37

防止「美化」選項卡翻譯爲空格

回答

相關問題