2015-04-28 40 views
0

我試圖使我的網站使用響應式佈局移動友好,但表單中的選擇控件打破它,超過屏幕寬度超過屏幕寬度,無論他們包含一個長OPTION項目。「選擇」表單元素打破我的網站的響應式佈局

處理這些表單元素的正確方法是什麼?

+0

您使用引導? –

+0

有時,長時間選擇盒子會使桌面設計變得醜陋。儘量不要在選擇選項中使用長時間的解釋。你可以在每個選項選擇的其他框中加入解釋。 – madz

+0

我想你可以使用檢測較小寬度的Javascript,並瀏覽所有'

回答

2

您可以使用max-width來限制您的<select>的尺寸。通常是好主意給你的選擇max-width: 100%; text-overflow: ellipsis;

最大寬度將限制到其父寬度的大小,如果一個選項溢出,比它的文本將在漂亮的瀏覽器中用簡潔的省略號截斷並且簡單地在中間切入其他的。

單擊選擇後,出現選項列表。標準桌面瀏覽器中的列表可能會更寬,但它的大小不會計入主體大小,因此它不會破壞佈局。在手機上,這可能不會成爲問題,因爲移動瀏覽器顯示選項列表的方式不同。

請參閱http://codepen.io/anon/pen/VLLvVV

+0

謝謝,這是做的伎倆! :) – richey