當某些輸入爲固定大小時，如何將一行多輸入寬度設置爲瀏覽器窗口寬度的百分比？

-1

標題說明了一切。我的輸入，包括文本字段，選擇，單選按鈕和複選框一排，我想的行的總寬度是在屏幕的百分比，但我也希望一些的各個輸入保持恆定的寬度。我試圖把所有的行內輸入標籤<div>並設置div到width:100%的CSS，但它不會做任何事情。我認爲這是因爲我已將某些輸入的CSS設置爲特定數量的像素。當某些輸入爲固定大小時，如何將一行多輸入寬度設置爲瀏覽器窗口寬度的百分比？

<div style="width:90%"> 
 
    <span style="width:100%; display:block"> 
 
     <input type="text" style="width:50px"> 
 
     <input type="text" style="width:33%"> 
 
     <input type="text" style="width:33%"> 
 
    </span> 
 
</div>

來源

2017-12-18 Meler Lawler

總結他們一個div裏面，如果你想讓他們保持固定的行和下一行不換然後使用flexbox，在這裏你可以保持一些元素寬度固定，而其他元素則靈活取決於視口大小。 – 2017-12-18 11:40:55

在您提出解決方案之前，請發佈最低限度的代碼並顯示您爲實現您的要求所做的努力。 – 2017-12-18 11:43:44

我不是一個專業的網絡開發人員，我只是在製作一個有趣的網站。我知道基本的知識，但還不足以在這種情況下實現我想要的。我做了一些谷歌搜索，但無法找到這個具體問題的答案。我確實發佈了我嘗試的最小代碼。 Flex不是一種選擇，因爲我的Microsoft手機不支持Flex，並且在該手機上查看我的網站是我希望將輸入大小調整爲適合瀏覽器寬度的原因。儘管感謝您的幫助。 –

Meler，

看來你沒有考慮輸入等基礎一般表現爲內聯元素。請確保你已經讓他們阻止佔據寬度％

如：

<div style="width:90%"> 
    <span style="width:100%">some text</span> 
//this should not work until you make span as 'display:block' 
</div>

來源

2017-12-18 11:54:18

好吧，我把我的輸入該行'

' and '

之間'但它字面上無所事事。當我調整瀏覽器窗口的大小時，一些輸入會移到第二行，而不會調整大小。 –

你能通過小提琴分享你的代碼嗎？ –

我用一個非常基本的代碼更新了我的OP。我真正的代碼非常長，但如果它有幫助，我會發布它。 –

當某些輸入爲固定大小時，如何將一行多輸入寬度設置爲瀏覽器窗口寬度的百分比？

回答

相關問題