阻止 jQuery 移动水平单选按钮断开或环绕
Stop jQuery Mobile Horizontal Radio Buttons from Breaking or Wrapping
我正在尝试使用 jQuery 移动演示页面中的 html 并排创建两个水平单选按钮组。
问题是当单选按钮之间仍然有很多 space 时,它们会中断并开始换行到下一行。有没有一种方法可以设置它们不换行,直到在小屏幕上两者之间几乎没有 space?
您可以看到 this fiddle.
中发生的事情
此外,我想将第二个无线电分组向右对齐,但是将 text-align:right
或 position:relative; right:0px
添加到 #SecondGroup 没有任何效果。
这是我的代码:
<div data-role="fieldcontain">
<fieldset class="ui-grid-a ">
<div class="ui-block-a" id="FirstGroup">
<fieldset data-role="controlgroup" data-mini="true" data-theme="b" data-type="horizontal" >
<input type="radio" name="same" id="sold" value="on" checked="checked">
<label for="sold">One</label>
<input type="radio" name="same" id="active" value="off">
<label for="active">Two</label>
</fieldset>
</div>
<div class="ui-block-b" id="SecondGroup">
<fieldset data-role="controlgroup" data-mini="true" data-theme="b" data-type="horizontal" >
<input type="radio" name="conditionSame" id="all" value="on" checked="checked">
<label for="all">One</label>
<input type="radio" name="conditionSame" id="used" value="on" >
<label for="used">Two</label>
<input type="radio" name="conditionSame" id="new" value="on">
<label for="new">Three</label>
</fieldset>
</div>
</fieldset>
</div>
谢谢。
您的代码中有不可见的空格
(请参见下面的屏幕截图)。移除它们后,包装工作。
Fiddle: http://jsfiddle.net/bunoxL4r/3/
在这张 fiddle 来源的屏幕截图中,您可以看到这些
:
我遇到了同样的问题 - 查看源代码,我发现了类似的 non-break 空格集;
我的代码中有 none 那么它们是如何到达那里的呢?
我使用制表符缩进了代码(现在使用空格!)。不知何故,制表符被转换为 non-break 空格。去掉所有的缩进问题就解决了。
我正在尝试使用 jQuery 移动演示页面中的 html 并排创建两个水平单选按钮组。
问题是当单选按钮之间仍然有很多 space 时,它们会中断并开始换行到下一行。有没有一种方法可以设置它们不换行,直到在小屏幕上两者之间几乎没有 space?
您可以看到 this fiddle.
中发生的事情此外,我想将第二个无线电分组向右对齐,但是将 text-align:right
或 position:relative; right:0px
添加到 #SecondGroup 没有任何效果。
这是我的代码:
<div data-role="fieldcontain">
<fieldset class="ui-grid-a ">
<div class="ui-block-a" id="FirstGroup">
<fieldset data-role="controlgroup" data-mini="true" data-theme="b" data-type="horizontal" >
<input type="radio" name="same" id="sold" value="on" checked="checked">
<label for="sold">One</label>
<input type="radio" name="same" id="active" value="off">
<label for="active">Two</label>
</fieldset>
</div>
<div class="ui-block-b" id="SecondGroup">
<fieldset data-role="controlgroup" data-mini="true" data-theme="b" data-type="horizontal" >
<input type="radio" name="conditionSame" id="all" value="on" checked="checked">
<label for="all">One</label>
<input type="radio" name="conditionSame" id="used" value="on" >
<label for="used">Two</label>
<input type="radio" name="conditionSame" id="new" value="on">
<label for="new">Three</label>
</fieldset>
</div>
</fieldset>
</div>
谢谢。
您的代码中有不可见的空格
(请参见下面的屏幕截图)。移除它们后,包装工作。
Fiddle: http://jsfiddle.net/bunoxL4r/3/
在这张 fiddle 来源的屏幕截图中,您可以看到这些
:
我遇到了同样的问题 - 查看源代码,我发现了类似的 non-break 空格集; 我的代码中有 none 那么它们是如何到达那里的呢? 我使用制表符缩进了代码(现在使用空格!)。不知何故,制表符被转换为 non-break 空格。去掉所有的缩进问题就解决了。