根据设备方向重新排列 html 形式的单选按钮
Reallign radio buttons in html form according to device orientation
我是 HTML 和 jQuery 的新手。
我现在正在制作一个 html 表格，我将在多台平板电脑上使用它。我想要的是，例如，当平板电脑为纵向时，可用选项应显示在两行中，如下所示：
但是当平板电脑处于横向位置时，可用选项应显示在四行中，如下所示：
或者像这样，如果在最后一个单选按钮之后有一个 'text input' 字段（例如 'others:' '| |'）
遗憾的是，我没有找到答案。如果有人能告诉我如何做到这一点（或者甚至给出一个代码示例），我将不胜感激。
非常感谢！
对于初学者来说，要创建看起来像布局设计中那样的按钮，您不能轻易使用 radio 输入类型。
原因是您不能像按钮输入类型那样设置单选按钮的样式以在其中包含文本值。所以在我的 fiddle example 中，我选择使用按钮输入类型，但您可以选择使用任何 html 标签，让您可以将文本包装在
<!-- Your design requires html elements that can wrap text inside -->
<input type="button" class="answer" value="CSS or JS" />
接下来，让您的按钮和问题响应：
您可以简单地使用 css media-queries to achieve this. First, set your default width, then use css media-queries 来更改与屏幕尺寸相关的任何页面元素：
/* 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 { }
}
See this link 了解更多关于使用媒体查询的信息。
媒体查询是处理表单响应特性所需要的全部。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~
奖励：在 Javascript / jQuery
中处理您的表单数据
您的布局设计要求您能够以特殊方式设置按钮的样式（即元素中间的文本看起来像按钮），但您不能设置单选按钮的样式以使其看起来它们在您的设计中的方式，因此您将不得不 "fake it"，通过使用将常规 html 元素转换为交互式元素的常用技术（例如：将常规 <div> 或 <span> 通过为它分配一个可点击的行为来进入一个按钮）。这是开发人员使用 CSS 和 Javascript 使应用程序的行为与应用程序的设计保持一致的流行技术。
您的问题的一个明显解决方案（不需要任何 javascript，但会迫使您更改设计）是重新设计您的表单以仅使用常规 <form> 元素，在这种情况下，您可以像往常一样使用 <form> 和它的提交按钮。
所以要支持像您这样的自定义设计，您必须跳出框框思考一下，找到一种方法将 html 元素样式化为 "look like a button" 和 "act like a button" ...这在 javascript 和 CSS 中非常容易。
由于这个主题与您的问题并不完全相关（您的问题更适合响应式设计），我将简要提及您可以使用 jQuery 完成设计的技术，然后展示你是一个工作样本。
首先，由于您的按钮不再是真正的表单元素，您必须找到一种方法来在您的应用程序中存储或记录用户的选择（以便您可以处理或验证它们）。一种简单的方法是使用 jQuery，并为每个按钮附加一个 click() 处理程序，这将允许您分配（或取消分配）您想要的外观 "selected" 按钮，并捕获按钮答案的值并将该值存储在某处，例如 javascript 对象）。然后，当用户单击 "Submit" 时，您可以访问此存储的表单数据并执行您的应用程序需要执行的任何操作...
You can see a working demo of these ideas in action here
希望这能帮助您走上正确的道路！
我是 HTML 和 jQuery 的新手。
我现在正在制作一个 html 表格，我将在多台平板电脑上使用它。我想要的是，例如，当平板电脑为纵向时，可用选项应显示在两行中，如下所示：
但是当平板电脑处于横向位置时，可用选项应显示在四行中，如下所示：
或者像这样，如果在最后一个单选按钮之后有一个 'text input' 字段（例如 'others:' '| |'）
遗憾的是，我没有找到答案。如果有人能告诉我如何做到这一点（或者甚至给出一个代码示例），我将不胜感激。
非常感谢！
对于初学者来说，要创建看起来像布局设计中那样的按钮，您不能轻易使用 radio 输入类型。
原因是您不能像按钮输入类型那样设置单选按钮的样式以在其中包含文本值。所以在我的 fiddle example 中，我选择使用按钮输入类型，但您可以选择使用任何 html 标签，让您可以将文本包装在
<!-- Your design requires html elements that can wrap text inside -->
<input type="button" class="answer" value="CSS or JS" />
接下来，让您的按钮和问题响应：
您可以简单地使用 css media-queries to achieve this. First, set your default width, then use css media-queries 来更改与屏幕尺寸相关的任何页面元素：
/* 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 { }
}
See this link 了解更多关于使用媒体查询的信息。
媒体查询是处理表单响应特性所需要的全部。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~
奖励：在 Javascript / jQuery
中处理您的表单数据您的布局设计要求您能够以特殊方式设置按钮的样式（即元素中间的文本看起来像按钮），但您不能设置单选按钮的样式以使其看起来它们在您的设计中的方式，因此您将不得不 "fake it"，通过使用将常规 html 元素转换为交互式元素的常用技术（例如：将常规 <div> 或 <span> 通过为它分配一个可点击的行为来进入一个按钮）。这是开发人员使用 CSS 和 Javascript 使应用程序的行为与应用程序的设计保持一致的流行技术。
您的问题的一个明显解决方案（不需要任何 javascript，但会迫使您更改设计）是重新设计您的表单以仅使用常规 <form> 元素，在这种情况下，您可以像往常一样使用 <form> 和它的提交按钮。
所以要支持像您这样的自定义设计，您必须跳出框框思考一下，找到一种方法将 html 元素样式化为 "look like a button" 和 "act like a button" ...这在 javascript 和 CSS 中非常容易。
由于这个主题与您的问题并不完全相关（您的问题更适合响应式设计），我将简要提及您可以使用 jQuery 完成设计的技术，然后展示你是一个工作样本。
首先，由于您的按钮不再是真正的表单元素，您必须找到一种方法来在您的应用程序中存储或记录用户的选择（以便您可以处理或验证它们）。一种简单的方法是使用 jQuery，并为每个按钮附加一个 click() 处理程序，这将允许您分配（或取消分配）您想要的外观 "selected" 按钮，并捕获按钮答案的值并将该值存储在某处，例如 javascript 对象）。然后，当用户单击 "Submit" 时，您可以访问此存储的表单数据并执行您的应用程序需要执行的任何操作...
You can see a working demo of these ideas in action here
希望这能帮助您走上正确的道路！