如何强制复选框和文本在同一行？ [英] How to force a checkbox and text on the same line?

问题描述

如何强制复选框和以下文本出现在同一行上？在下面的HTML中，我只希望标签和输入之间的分界线，而不是输入和标签之间。

How can I force a checkbox and following text to appear on the same line? In the following HTML, I'd only want the line to break between label and input, not between input and label.

<p><fieldset>
    <input type="checkbox" id="a">
    <label for="a">a</label>
    <input type="checkbox" id="b">
    <!-- depending on width, a linebreak can occur here. -->
    <label for="b">b</label>
    <input type="checkbox" id="c">
    <label for="c">c</label>
</fieldset></p>

澄清：如果fieldset / p对所有元素都不够宽， p>

To clarify: if the fieldset/p is not wide enough for all elements, instead of:

[] a [] b []
c [] d [] e

我想：

I want:

[] a [] b
[] c [] d
[] e

推荐答案

如果将每个项目包装在一个div中，它不会中断。看看下面的链接我的小提琴。我将字段的宽度设置为125px，并使每个项目宽度为50px。您会看到标签和复选框在一条新线上并排排列，并且不会中断。

It wont break if you wrap each item in a div. Check out my fiddle with the link below. I made the width of the fieldset 125px and made each item 50px wide. You'll see the label and checkbox remain side by side on a new line and don't break.

<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak can occur here. -->
    <label for="b">bgf bh fhg fdg hg dg gfh dfgh</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>
</fieldset>

http://jsfiddle.net/t5dwp7pg/1/

这篇关于如何强制复选框和文本在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！