文本字段和按鈕，鍍鉻

不留行內我有一個CSS/HTML相關的問題，這真的討厭我:(文本字段和按鈕，鍍鉻

我有一個div是600px的的寬度500像素寬度100像素的按鈕輸入文本字段

<div id="search"> 
    <input type="text" id="search_bar" class="search_bar" name="q"/> 
    <button id="search_videos" class="cool_button">Search</button> 
</div>

的按鈕，輸入標籤有一堆的CSS3屬性的似乎在Firefox罰款，但該按鈕進入到Chrome中的下一行，是否有一個CSS我缺少調整寬度，因此始終保持內聯？謝謝

編輯：

繼承人的小提琴:)

http://jsfiddle.net/eGyRU/

來源

2011-11-29 Decrypter

你可以發佈你的CSS嗎？或者更好的小提琴。很難猜測什麼CSS屬性觸發包裝。 – mrtsherman

在大多數盒子模型渲染中，邊框都算作寬度，所以您需要考慮這一點。由於按鈕兩側的邊框，因此您的寬度實際上是604px。 – Jemaclus

您當前的寬度爲521px，500px的不是。發生這種情況是因爲您必須添加寬度和填充值以獲取最終寬度= 500px + 0.4em x 2（左側和右側填充）。如果將輸入寬度設置爲479px，它將會被解決。

來源

2011-11-30 00:50:37

實際上，Web瀏覽器有時在實現不同屬性方面存在差異。這裏的問題可能是由於填充屬性的元素。因此使其工作，要麼你應該儘量減少寬度一個你輸入或按鈕元素的或只是增加你的「格」標籤的寬度。

來源

2011-11-30 07:28:29

文本字段和按鈕，鍍鉻

回答

相關問題