Question

我有一个复选框，我添加了一个margin-right:10px，它们之间有一点空间。它工作正常，但当标签有像这样exemple的换行符时，边距似乎不能正常工作。我想在左边单独选中复选框，在右边有标签，如果它有多行，则不要在复选框下面。

代码

<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;我不希望它在一条线上。

Answer 1

#rr-element{
    width:180px; 
    white-space:nowrap;
}

Answer 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;}

Example

Answer 3

更改样式

#rr-element{width:auto;}

Answer 4

我会这样做：

.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>

Answer 5

我找到了一种方法

Fiddle

代码

<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;
}

Answer 6

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

label
{
display:inline-block;
}
input[type=checkbox]
{
display:inline-block;
margin-right:10px;
}

如何修复复选框旁边的标签边距？

6 个答案: