响应表单html css

我有一张这样的表格：

在我在手机屏幕上打开它之前，它看起来很正常：

HTML结构：

预订日期：
看法
PDF
CSV

必须将style=”“属性中的所有代码移到

标记或css文件，只需将此代码复制到其中即可

CSS

#reportrange{
background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; display:inline
}

#button{
padding:5px 12px;margin-bottom:3px;
}

HTML（我刚刚在按钮中添加了id，只需将其复制到那里）

---

因此，在这里，您可以更改填充并查看结果，您可以在手机上查看，也可以通过调整浏览器大小来查看。

必须将style=”“属性中的所有代码移到

标记或css文件，只需将此代码复制到其中即可

CSS

#reportrange{
background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; display:inline
}

#button{
padding:5px 12px;margin-bottom:3px;
}

HTML（我刚刚在按钮中添加了id，只需将其复制到那里）

---

因此，在这里，您可以更改填充并查看结果，您可以在手机上查看，也可以通过调整浏览器大小来查看

为什么不使用Bootstap表单框架使手机上的所有内容保持一致@李，是的，我同意，你应该更喜欢使用引导。你所要做的就是包括类名。它使工作更简单、更容易。您可以在这里了解它：为什么不使用Bootstap表单框架来保持手机上的所有内容保持一致@李，是的，我同意，你应该更喜欢使用引导。你所要做的就是包括类名。它使工作更简单、更容易。你可以在这里了解它：我知道这已经被标记为已接受，如果它有效，那很好，但它会更有意义，使用标准引导配置来布局表单会容易得多。@Lee这是完全正确的，我自己也一直使用引导，但我只是想给他一个原始的css+html回答，我知道这已经被标记为已接受，如果它正常工作，那就很好了，但这会更有意义，使用标准引导配置来布局表单会容易得多。@Lee这是完全正确的，我自己也一直在使用引导，但我只是想给他一个原始的css+html答案

@media screen and (max-width: 650px) {
#button{
/* add all of your mobile styles in here    */
}
}