比较来自世界各地的卖家的域名和 IT 服务价格

禁止文本转帐 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,, 但我想将代码保存为清洁和语义。

谢！
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    郭文康

    赞同来自:

    它似乎有效：

    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>
    2021-03-20 0 0
    分享

    诸葛浮云

    赞同来自:

    我喜欢 ...

    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;
    
}
    2021-03-20 0 0
    分享

    詹大官人

    赞同来自:

    一个选择是这样的。


    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
    但无论如何，它将起作用。
    2021-03-20 0 0
    分享

    八刀丁二

    赞同来自:

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


    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>
    2021-03-20 0 0
    分享

    郭文康

    赞同来自:

    这是另一种选择。 它非常简单，但有效。
    你拿起包裹的部分。
    <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/
    我认为这是你努力的？ 让我知道。
    2021-03-20 0 0
    分享

    裸奔

    赞同来自:

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


    <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.
    2021-03-20 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved