标签之间持续存在不需要的空间答案

【问题标题】：Persistent unwanted space between labels标签之间持续存在不需要的空间
【发布时间】：2014-03-28 03:00:08
【问题描述】：

我一直试图消除这两个标签之间的空间，我想并排放置，但无济于事。我检查了 jQuery UI 的方式，但据我所知，他们的 CSS 和我的一样。我错过了什么？

.buttonset label {
    width: 45%;
    display: inline-block;
    border: 2px solid #eee;
    text-align: center;
    padding: 5px 0px;
    margin: 0px;
}
.buttonset label.checked {
    border: 2px solid #5dccdb;
    color: #5dccdb;
    font-style: italic;
}
.buttonset input[type='radio'] {
    display: none !important;
}

Fiddle

任何帮助表示赞赏。

【问题讨论】：

尝试将浮动属性添加为 .buttonset label{float: left;}
您的小提琴没有将checked 设置为第二个标签的类。它只是说checked，我想应该说class="checked"。
@TylerH 是的，我试图摆脱代码中所有多余的东西。在完整代码中，标签有 class="checked"

标签： html css forms radio-button label

【解决方案1】：

删除 HTML 中标签之间的空白：

演示 http://jsfiddle.net/w76rM/4/

有几种方法可以做到这一点，其中三种最快的方法是注释掉空格，将所有元素放在一行中，或者在下一行的开头使用前一个标签的结尾 >。

1 - 在一行中：

 <Label>...</label><Label>...</label>

2- 注释掉：

   <Label></label><!--
--><Label></label>

3->下一行开头的前一个标签：

   <Label></label
   ><Label></label>

带有注释掉空格的标记：

<div class="buttonset one_half"> 
    <div>Twins</div>
    <label for="twins_yes">
        <input id="twins_yes" name="twins" type="radio" value="Yes">Yes</label><!--
    --><label for="twins_no" class="checked">
        <input id="twins_no" name="twins" type="radio" value="No" checked>No</label>
</div>

【讨论】：

谁会猜到空格会导致空格:)？我是个白痴，到时候会接受答案。
@jboneca 很高兴为您提供帮助！

【解决方案2】：

您必须向标签元素添加左浮动

.buttonset label {
        width: 45%;
        display: inline-block;
        border: 2px solid #eee;
        text-align: center;
        padding: 5px 0px;
        margin: 0px;
    float: left;    }

【讨论】：