Question

我完全基于CSS创建自己的Twitter Bootstrap单选按钮版本。所选单选按钮的视觉反馈基于input[type="radio"]:checked + span。

作为我＆＃34;按钮的内容＆＃34;可以变化，宽度是动态的。这会导致按钮彼此相邻对齐的问题。

在我的JSfiddle我设定的固定宽度为50px。删除它和按钮是相互重叠的。

有人能指出我如何做到这一点的正确方向吗？

这是我的代码：

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

Answer 1

如果从背景类中删除position: absolute，则不再需要宽度样式：

jsFiddle

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

Answer 2

看看你的CSS，我认为你遇到的问题是因为你正在制作.background position: absolute它没有占用其父级的任何空间，所以父级没有真的有任何宽度，这就是你必须手动设置它的原因。剥离.background的绝对定位并实际上使其成为占用空间的元素将为父级提供宽度（将基于其内容）。现在就纠正在彼此问题上的问题，我认为这里有一些漂浮可行。 CSS在这里（我也删除了一些不必要的规则）

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

根据示例fiddle。

我确实添加了更多的填充，所以请随意根据需要进行调整。我也喜欢ems中的填充，所以如果你的字体大小改变，填充总是相对的。

我怎样才能将动态div彼此相邻？

2 个答案: