按钮组边框半径问题

我想要一个按钮组，它有多个按钮，或者只有一个。按钮组边框半径问题

这里的HTML：

<!--THIS IS HOW IT SHOULD WORK FOR WHEN THERE IS THREE BUTTONS--> 
<article> 
    <div class='btn-group'> 
     <a class='button'>Test</a> 
     <a class='button'>Test</a> 
     <a class='button'>Test</a> 
    </div> 
</article> 
<!--THIS WORKS TOO--> 
<article> 
    <div class='btn-group'> 
     <a class='button'>Test</a> 
     <a class='button'>Test</a> 
    </div> 
</article> 
<!--THIS DOESN'T WORK, should have rounded borders--> 
<article> 
    <div class='btn-group'> 
     <a class='button'>Test</a> 
    </div> 
</article>

它适用于当有多个按钮，但是当只有一个按钮，该按钮没有四舍五入四面八角。

来源

2015-01-02 Muhambi

把“.btn组.button：独生子女”作为最后的类在你的CSS文件

在你的CSS两个‘最后’和‘唯一’修改相同的属性，并实现了对遵守规定的顺序非常重要。

http://jsfiddle.net/jssq20gn/1/

.btn-group .button { 
    border-radius: 0; 
} 
.btn-group .button:first-child { 
    border-radius: 6px 0 0 6px; 
} 
.btn-group .button:last-child { 
    border-radius: 0 6px 6px 0; 
    margin-left: -1px; 
} 
.button { 
    padding: 10px; 
    background: teal; 
    border: 1px Black solid; 
    color: #FFF; 
} 
article { 
    padding: 10px; 
    margin-bottom: 50px; 
} 
.btn-group .button:only-child { 
    border-radius: 6px; 
    margin-left: 0; 
}

来源

2015-01-02 23:05:06 marcinn

的问题:last-child是越来越:only-child后调用。虽然这是一个“独生子女”，但它也是“最后一个孩子”，因此:last-child选择器正在覆盖CSS层次结构中的only:child。下面:last-child移动:only-child：

.btn-group .button:last-child { 
    border-radius: 0 6px 6px 0; 
    margin-left: -1px; 
} 

.btn-group .button:only-child { 
    border-radius: 6px; 
    margin-left: 0; 
}

FIDDLE

来源

2015-01-02 23:07:22 jmore009

按钮组边框半径问题

回答

相关问题