按鈕組邊框半徑問題

我想要一個按鈕組，它有多個按鈕，或者只有一個。按鈕組邊框半徑問題

這裏的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

按鈕組邊框半徑問題

回答

相關問題