Html 响应元件

我有下面的代码，我正试图使相邻的所有元素在窗口大小改变时都能做出响应。我不介意它们变小，只要它们靠在一起。我的想法是使用媒体查询，但在这方面不是很成功

HTML:

<div  style="float:left">
    <div >Testing Responsivness</div>
</div>
<div  style="float:left">
    <input type="number" class="theInput" min="1" />
    <label ><strong class="q-d-currency">&nbsp; $ </strong> </label>
</div>
<div >
    <button type="submit" ></button>
</div>

测试响应性
$

---

看看这把小提琴。。。这是你想要的吗

HTML:

    <div class="block1">
        <div style="display:inline-block;" >Testing Responsivness</div>
    </div>
    <div class="block2">
        <input type="number" class="theInput" min="1" />
        <label ><strong class="q-d-currency">&nbsp; $ </strong> </label>
    </div>
    <div class="block3">
        <button type="submit" >submit</button>
    </div>

---

这是

媒体查询

的简单用法。调整窗口大小时，列的

宽度将减小。我认为由于内联样式，您无法使用媒体查询

根据：

一般来说，我们可以说所有的风格都会“层叠”成一个整体
根据以下规则创建一个新的“虚拟”样式表，其中
具有最高优先级：

内联样式（HTML元素内部）外部和内部样式
图纸（在标题部分中）浏览器默认值

请发布您的JSFIDLE。您的代码有什么问题吗？实际上没有什么问题，我只想在窗口大小减小时，让所有元素彼此相邻，而不是彼此重叠。即使是这样，我也会使它们变小使用百分比（%）：按钮{width:30%}等等
.block1{
    width:33%;
    display:inline-block;
    float:left;
    word-break: break-all;
}

.block2{
    width:33%;
    display:inline-block;
    float:left;
}

.block3{
    width:33%;
    display:inline-block;
    float:left;
}