当某些输入为固定大小时，如何将一行多输入宽度设置为浏览器窗口宽度的百分比？

问题描述：

标题说明了一切。我的输入，包括文本字段，选择，单选按钮和复选框一排，我想的行的总宽度是在屏幕的百分比，但我也希望一些的各个输入保持恒定的宽度。我试图把所有的行内输入标签<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>

总结他们一个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>

好吧，我把我的输入该行'

' and '

之间'但它字面上无所事事。当我调整浏览器窗口的大小时，一些输入会移到第二行，而不会调整大小。 –

你能通过小提琴分享你的代码吗？ –

我用一个非常基本的代码更新了我的OP。我真正的代码非常长，但如果它有帮助，我会发布它。 –

当某些输入为固定大小时，如何将一行多输入宽度设置为浏览器窗口宽度的百分比？

相关推荐