根据设备方向以html形式显示的Reallign单选按钮

Question

我是HTML和jQuery的新手。

我正在处理一个HTML表单，该表单将在多个平板电脑上使用。 我想要的是，例如，当平板电脑为纵向时，可用选项应显示在两行中，如下所示：

但是当数位板处于横向位置时，可用选项应显示在四行中，如下所示：

或类似这样，如果在最后一个单选按钮之后有一个“文本输入”字段（例如“ others：”“ | |”）

可悲的是，我没有找到答案。 如果有人可以向我展示如何执行此操作（甚至提供代码示例），我将不胜感激。

非常感谢你！

Answer 1

对于初学者来说，要创建外观看起来与布局设计相同的按钮，就不能轻易使用radio输入类型。

原因是您无法设置单选按钮的样式，使其内部无法像按钮输入类型那样具有文本值。 因此，在我的小提琴示例中 ，我选择使用按钮输入类型，但是您可以选择使用任何允许在其中包装文本的html标签。

<!-- Your design requires html elements that can wrap text inside -->
<input type="button" class="answer" value="CSS or JS" />

接下来，使您的按钮和问题响应：

您可以简单地使用CSS媒体查询来实现此目的。 首先，设置默认宽度，然后使用CSS 媒体查询相对于屏幕尺寸更改页面的任何元素：

/* the default width */
.question input { width: 100px; }

/* the width when the screen is >= 700px */
@media (min-width: 700px) {
    .question input { width:350px; }    
}

使用媒体查询，您可以完全控制页面在您要定位的每种屏幕尺寸下的外观。

/* You can get more granular control with orientation targets: */
@media (min-width: 700px) and (orientation: landscape) {
    .question input { }    
}

有关使用媒体查询的更多信息， 请参见此链接 。

您只需要做媒体查询即可处理表单的响应特性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~

奖励：使用Javascript / jQuery处理表单数据

布局设计要求您具有以特殊方式设置按钮样式的能力（即，元素中间的文本看起来像按钮），但是您无法设置样式以使单选按钮看起来像按钮一样设计，因此您必须使用将常规html元素转换为交互式元素的通用技术来“伪造”它（例如：通过为其分配可点击的行为，将常规的<div>或<span>转换为按钮） 。 这是开发人员用来使用CSS和Javascript来使应用程序的行为与应用程序的设计保持一致的一种流行技术。

解决您的问题的一种明显方法（不需要任何javascript，但是会迫使您更改设计）是重新设计表单，使其仅使用常规的<form>元素，在这种情况下，您可以使用<form>并且它的提交按钮像往常一样。

因此，要支持像您这样的自定义设计，您必须在框外进行一点思考，并找到一种方法来获取样式化的html元素，使其“看起来像按钮”和“像按钮一样起作用” ...这非常容易在javascript和CSS中。

由于此主题与您的问题并不完全相关（您的问题更多地针对响应式设计），因此我将简要介绍可用于使用jQuery进行设计的技术，然后向您展示一个有效的示例。

首先，由于按钮不再是真正的表单元素，因此您必须找到一种在应用程序中存储或记录用户选择（以便您可以对其进行处理或验证）的方法。 一种简单的方法是使用jQuery，并将click()处理函数附加到每个按钮，这将允许您分配（或取消分配）您要赋予“选定”按钮的外观，并捕获按钮答案的值并将其存储在某个地方，例如在javascript对象上）。 然后，当用户单击“提交”时，您可以访问此存储的表单数据并执行您的应用程序需要做的任何事情...

您可以在此处查看这些想法的实际演示

希望这可以帮助您开始正确的道路！