禁止文本转帐 checkbox

我张贴了一套旗帜和颠簸,进入了一个世纪历史的问题转移问题 checkbox, 如果文本太长。

我的 HTML:


<div class="right">
<form id="updateProfile">
<fieldset class="checkboxes">
<p>4. What is your favorite type of vacation?</p>
<label><input name="vacation" type="checkbox" value="Ski Trips"/> Ski Trips</label>
<label><input name="vacation" type="checkbox" value="Beach Visits"/> Beach Visits</label>
<label><input name="vacation" type="checkbox" value="Cruises"/> Cruises</label>
<label><input name="vacation" type="checkbox" value="Historical and educational trips"/> Historical and educational trips</label>
<label><input name="vacation" type="checkbox" value="Yachting"/> Yachting</label>
<label><input name="vacation" type="checkbox" value="Road Trip"/> Road Trip</label>
<label><input name="vacation" type="checkbox" value="Spa Weekend"/> Spa Weekend</label>
<label><input name="vacation" type="checkbox" value="Bed and Breakfast"/> Bed and Breakfast</label>
<label><input name="vacation" type="checkbox" value="Stay home and relax"/> Stay home and relax</label>
<label><input name="vacation" type="checkbox" value="Gambling Trips"/> Gambling Trips</label>
<label><input name="vacation" type="checkbox" value="Volunteer"/> Volunteer</label>
</fieldset>
</form>
</div>


我的 CSS:


div.right{width:580px;}

form#updateProfile fieldset label{
display: block;
margin-bottom: 5px;
font-size: 16px;
float: left;
width: 33%;
}


看我的 fiddle 这里:
http://jsfiddle.net/fmpeyton/7WmGr/
/

在不同的网站上搜索许多搜索后,我似乎似乎找到了合理的解决方案。 我开放了改变我的建议 markup/styles,, 但我想将代码保存为清洁和语义。

谢!
已邀请:

郭文康

赞同来自:

它似乎有效:

http://jsfiddle.net/7WmGr/5/
/

我给了
label

a
margin-left

的 18px 和旗帜 a
margin-left

来自-8px。

似乎有效 Chrome & IE9.


div.right {
width: 598px;
}

form#updateProfile fieldset label {
display: block;
margin-bottom: 5px;
font-size: 16px;
float: left;
width: 30%;
margin-left: 18px;
}

form#updateProfile fieldset label input[type='checkbox'] {
margin-left: -18px;
}



<div class="right">
<form id="updateProfile">
<fieldset class="checkboxes">
<p>4. What is your favorite type of vacation?</p>
<label><input name="vacation" type="checkbox" value="Ski Trips"/> Ski Trips</label>
<label><input name="vacation" type="checkbox" value="Beach Visits"/> Beach Visits</label>
<label><input name="vacation" type="checkbox" value="Cruises"/> Cruises</label>
<label><input name="vacation" type="checkbox" value="Historical and educational trips"/> Historical and educational trips</label>
<label><input name="vacation" type="checkbox" value="Yachting"/> Yachting</label>
<label><input name="vacation" type="checkbox" value="Road Trip"/> Road Trip</label>
<label><input name="vacation" type="checkbox" value="Spa Weekend"/> Spa Weekend</label>
<label><input name="vacation" type="checkbox" value="Bed and Breakfast"/> Bed and Breakfast</label>
<label><input name="vacation" type="checkbox" value="Stay home and relax"/> Stay home and relax</label>
<label><input name="vacation" type="checkbox" value="Gambling Trips"/> Gambling Trips</label>
<label><input name="vacation" type="checkbox" value="Volunteer"/> Volunteer</label>
</fieldset>
</form>
</div>

诸葛浮云

赞同来自:

我喜欢 ...

HTML:


<input name="vacation" type="checkbox" value="Ski Trips"/><label>very long label ...</label>


CSS:


input[type="checkbox"] { 
position: absolute;
}
input[type="checkbox"] ~ label {
padding-left:1.4em;
display:inline-block;
}

詹大官人

赞同来自:

一个选择是这样的。


form#updateProfile fieldset label{
display: block;
margin-bottom: 5px;
font-size: 16px;
float: left;
width: 30%;
padding-left: 3%;
position: relative;
}

input {
position: absolute;
left: -5px;
}


演示在这里:
http://jsbin.com/opoqon/1/edit
我通常如何做到这一点不同于我不转身
inputs


labels

, 我做了一些


<input id="ski-trips" name="vacation" type="checkbox" value="Ski Trips"/><label for="ski-trips">Ski Trips</label>


然后允许您促进铺设。

以下是此方法的示例:
http://jsbin.com/otezut/1/edit
但无论如何,它将起作用。

八刀丁二

赞同来自:

这是其中之一,这较少依赖于输入元素的大小。


div {width: 12em;}

label {
display: block;
white-space: nowrap;
margin: 10px;
}

label input {
vertical-align: middle;
}

label span {
display: inline-block;
white-space: normal;
vertical-align: top;
position: relative;
top: 2px;
}



<div>
<label><input type="radio"/><span>I won't wrap</span></label>
<label><input type="checkbox"/><span>I won't wrap</span></label>
<label><input type="radio"/><span>I am a long label which will wrap</span></label>
<label><input type="checkbox"/><span>I am a long label, I will wrap beside the input</span></label>
</div>

郭文康

赞同来自:

这是另一种选择。 它非常简单,但有效。
你拿起包裹的部分。
<label><input name="vacation" type="checkbox" value="Historical and educational trips"/> Historical and educational <span class="antiWrap">trips</span></label>

并且您与课程添加了差距。 我打电话给课 antiWrap. 然后你使用 css, 将左字段添加到它。
.antiWrap { margin-left: 18px; }

这里 myfiddle, 基于您的代码的使用。
http://jsfiddle.net/alexhram/7WmGr/3/
我认为这是你努力的? 让我知道。

裸奔

赞同来自:

我尝试了所有选项,最好的解决方案是:


<div>
<label><input type="checkbox"/><span>Text</span></label>
<label><input type="checkbox"/><span>Text</span></label>
</div>


- 35 水坑和菲利普如何建议。

A B. CSS 你只是安装
float:left


checkboxes

, 并防止文本包装 checkbox, 你可以使用
overflow:hidden


span

.


[type="checkbox] {
float: left;
}
span {
overflow: hidden;
}


您可以使用
margin-left

, 从文本中提供所需的空间 checkbox.

要回复问题请先登录注册