html - Skeleton CSS - 响应式表单

Question

我有一个使用骨架 css 实现的表单。我使用的是三列（即三分之一列）布局，但是由于列内容的各自长度，这导致了很多空白。我更喜欢类似于以下的水平布局：

文本框1 文本框2 文本框3

文本框 4 文本框 5 文本框 6

然后它会在移动设备上崩溃，如下所示：

文本框1

文本框2

文本框3

文本框4

文本框5

文本框6

到目前为止，我认为我能做到这一点的唯一方法是将每个文本框包装在它自己的“三分之一”列中。有更清洁的方法吗？

谢谢

Answer 1

将类设置为您的文本框（或input[type="text"]）和 CSS：

对于桌面：

.yourclass {
    width: 33%;
    float: left;
 }

对于手机：

@media only screen and (max-device-width: 480px) {
    .yourclass {
         width: 100%;
         float: left;
    }
}

这：https ://mislav.net/2010/04/targeted-css/可能会有所帮助。