Html 如何浮动动态div'；谁挨着谁？

我正在创建我自己版本的Twitter引导单选按钮，完全基于CSS。所选单选按钮的视觉反馈基于

输入[type=“radio”]：选中+span

由于我的“按钮”的内容可能不同，因此宽度是动态的。这会导致按钮相邻对齐时出现问题

在我的电脑中，我设定了50像素的固定宽度。卸下此按钮后，两个按钮相互重叠

有没有人能为我指明正确的方向，告诉我如何才能做到这一点

这是我的密码：

//HTML
<div class="button-group binary" data-toggle="buttons-radio"> 
    <div class="radio-wrapper">
        <input type="radio" class="active" name="status" value="1" />
        <span class="background">Yes</span>
    </div> 
    <div class="radio-wrapper">
        <input type="radio" class="inactive" name="status" value="0" checked="checked" />
        <span class="background">No</span>
    </div>
</div>

//CSS
.button-group{
    /*display: table;*/
    display: block;
}
.radio-wrapper {
    /*display: table-cell; */
    display: inline-block;
    position: relative;
    height: 28px;
    margin: 0;
    width: 50px; /* I want this to be dynamic */
}

.radio-wrapper:first-child .background{
    border-right: 0;    
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.radio-wrapper:last-child .background{ 
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


input[type="radio"]{
    position: absolute;
    display: block;
    height: 28px;
    width: 100%;   
    z-index: 200;
    cursor: pointer;
    opacity: 0;
}

input[type="radio"]:checked + span {
     background-color: #63B1DE;
     color: #fff;
}


.background {
    position: absolute;
    z-index: 100;
    height: 100%;
    padding: 0 5px;
    border: solid 1px #87A2B2;
    background-color: #fff;
    text-align: center;
    line-height: 28px;
    text-transform: uppercase;
}

//HTML
对
不
//CSS
.按钮组{
/*显示：表格*/
显示：块；
}
.无线电包装器{
/*显示：表格单元格*/
显示：内联块；
位置：相对位置；
高度：28px；
保证金：0；
宽度：50px；/*我希望这是动态的*/
}
.收音机包装器：第一个孩子.背景{
右边界：0；
边框左上半径：4px；
边框左下半径：4px；
}
.radio包装器：最后一个子项。背景{
边框右上角半径：4px；
边框右下半径：4px；
}
输入[type=“radio”]{
位置：绝对位置；
显示：块；
高度：28px；
宽度：100%；
z指数：200；
光标：指针；
不透明度：0；
}
输入[type=“radio”]：选中+span{
背景色：#63B1DE；
颜色：#fff；
}
.背景{
位置：绝对位置；
z指数：100；
身高：100%；
填充：0 5px；
边框：实心1px#87A2B2；
背景色：#fff；
文本对齐：居中；
线高：28px；
文本转换：大写；
}

如果从背景类中删除

位置：绝对

，则不再需要宽度样式：

---

看看你的CSS，我认为你遇到的问题是因为你正在制作

.background

position:absolute

它没有占用父级中的任何空间，因此父级实际上没有任何宽度，这就是你必须手动设置它的原因。剥离

.background

的绝对位置，并实际使其成为占用空间的元素，将为父元素提供一个宽度（这将基于其内容）。现在，就纠正相互重叠的问题而言，我认为一些浮动在这里是可行的。CSS在这里（我还删除了一些不必要的规则）

例如

---

我确实增加了一点你们有的填充物，所以请随意调整。我也喜欢ems中的填充，所以如果字体大小发生变化，填充总是相对的。

伙计，你让它看起来很明显！现在按钮之间有了一个间隙，但这是通过使用table/table cell修复的。谢谢：）

.button-group{
    /*display: table;*/
    display: block;
}
.radio-wrapper {
    /*display: table-cell; */
    display: inline-block;
    position: relative;
    height: 28px;
    margin: 0;
    /*width: 50px;  not needed*/
}

.radio-wrapper:first-child .background{
    border-right: 0;    
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.radio-wrapper:last-child .background{ 
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


input[type="radio"]{
    position: absolute;
    display: block;
    height: 28px;
    width: 100%;   
    z-index: 200;
    cursor: pointer;
    opacity: 0;
}

input[type="radio"]:checked + span {
     background-color: #63B1DE;
     color: #fff;
}


.background {
    z-index: 100;
    height: 100%;
    padding: 0 5px;
    border: solid 1px #87A2B2;
    background-color: #fff;
    text-align: center;
    line-height: 28px;
    text-transform: uppercase;
}

.radio-wrapper {
    position: relative;
    float:left;
}

.radio-wrapper:first-child .background{
    border-right: 0;    
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.radio-wrapper:last-child .background{ 
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


input[type="radio"]{
    position: absolute;
    display: block;
    height: 28px;
    width: 100%;   
    z-index: 200;
    cursor: pointer;
    opacity: 0;
}

input[type="radio"]:checked + span {
     background-color: #63B1DE;
     color: #fff;
}


.background {   
    height: 100%;
    padding: .5em;
    border: solid 1px #87A2B2;
    background-color: #fff;
    text-align: center;
    line-height: 28px;
    text-transform: uppercase;
}