1

我有一个复选框，我margin-right:10px在它们之间添加了一个小空间。它工作正常，但是当标签有这样的换行符时，边距似乎无法正常工作。如果它有多行，我希望将复选框单独放在左侧，将标签放在右侧，而不是在复选框下方。

代码

<dd id="rr-element">
   <label for="rr-1">
      <input type="checkbox" value="1" id="rr-1" name="rr[]">
      Value 1 lorem lipsum dolor si amet 
   </label>
</dd>

CSS

#rr-element{width:180px;}
dd label input {
   margin-right:10px;
}

小更新：ul或dd的最大宽度为180px；我不希望它在一条线上。

4

6 回答 6

2

尝试这个

html

<dd id="rr-element">
    <input value="2" id="rr-1" type="checkbox" name="SearchForm[position][]">
    <label for="rr-1">Value 1 lorem lipsum dolor lorem lipsum dolorlorem lipsum dolor</label>
</dd>

css

#rr-element{width:180px; overflow:auto;}
dd label {float:right; width:150px; display:inline-block;}
dd label input {float:left; margin-right:10px;}

例子

于 2013-08-28T12:31:44.430 回答
2 
#rr-element{
    width:180px; 
    white-space:nowrap;
}
于 2013-08-28T12:00:50.007 回答
0

如果您可以为它们制作两个不同的 div 或 span 以使复选框和文本之间的空间相等，那就更好了。

label
{
display:inline-block;
}
input[type=checkbox]
{
display:inline-block;
margin-right:10px;
}
于 2013-08-28T12:43:38.660 回答
0

我找到了一种方法

小提琴

代码

<dd id="rr-element">
    <input value="2" id="rr-1" type="checkbox" name="SearchForm[position][]" />
<label for="rr-1">Value 1 lorem lipsum dolor lorem lipsum dolorlorem lipsum dolor</label>
</dd>

CSS

#rr-element{width:180px;}


label,
input {
    display: block;
}

input {
    float: left;
    margin-right:10px;
}

label {
    overflow: hidden;
}
于 2013-08-28T12:31:35.833 回答
0

改变风格

#rr-element{width:auto;}
于 2013-08-28T12:00:19.817 回答
0

我会这样做：

.rr-element{min-width:180px;}
dd input {
   margin-right:10px;
}

<dd class="rr-element">
<input value="2" id="rr-1" type="checkbox" name="SearchForm[position][]">
<label for="rr-1">Bartender</label>
</dd>
于 2013-08-28T12:01:31.213 回答