刪除按鈕的彎曲邊緣及調整面板的文本

我用盡了一切我能想到的頂部和底部按鍵的去除彎曲的邊緣，但他們將無法正常工作。我嘗試這樣做：

.btn { 
    border-radius: 0; 
    font-size:25px; 
    padding:0; 
}

但這只是去除該彎曲邊緣的一部分，之前和之後： enter image description here

和一件事是面板，我試圖設置面板的高度，但現在的文本沒有放在中心水平和垂直：

.panel-title { 
    height:8px !important; 
}

enter image description here

怎麼辦我解決了這兩個問題？非常感謝！

P/s：既然我在問，我也很想聽聽您的意見，或者可以幫助我使網站看起來像這樣的提示：https://www.behance.net/gallery/6355085/dashboard-analytics。我創建了以下這個想法的網站，但我覺得我缺少出頭，因爲我的樣子很亂:(

來源

2014-11-21 NeedAnswers

這些按鈕可能位於容器中，該容器仍具有一些邊界半徑。也刪除該邊界半徑！ – Andi 2014-11-21 15:06:46

對於面板文本，設置與面板高度相等的行高。 – Andi 2014-11-21 15:07:27

我不知道爲什麼會發生這種情況，但我會使用

如果添加此

.btn-group-vertical>.btn:first-child:not(:last-child) { 
    border-top-right-radius: 0px; 
}

DEMO

來源

2014-11-21 15:07:29

添加!important您CSS不想在每一處移除半徑

小提琴：http://jsfiddle.net/ettmujvg/20/

周

的CSS：

body { 
    background-color:#444444; 
} 

.panel{ 
    border-radius: 0 !important; // <--- HERE 
} 
.btn { 
    border-radius: 0 !important; // <--- HERE 
    font-size:25px; 
    padding:0; 
} 

.btntext{ 
    padding:0; 
    font-size:14px !important; 
    font-weight:bold; 
} 
.btn-default { 
     color:black !important; 
} 
.btn-custom { 
    width: 100px !important; 
    margin-top:0px !important; 
    background-image:linear-gradient(to right, #FFF 0px, #E0E0E0 100%) !important; 
} 

.btn-custom a{ 
    color:#333 !important; 
} 

.pHeader-panel { 
    margin-bottom : 0px; 
    height:25px; 
    text-align:center; 
    background-image:linear-gradient(to left, #FFF 0px, #E0E0E0 100%) !important; 
} 

.panel-heading { 
    background-image:linear-gradient(to top, #FFF 0px, #E0E0E0 100%) !important; 
} 


.panel-title { 
    height:8px !important; 
} 

#pHeader 
{ 
    position: fixed; 
    width: 100%; 
    top:0px; 
} 

#pLeftMenu { 
    position: fixed; 
    top: 25px; 
} 

#pBody { 
    margin-top:30px; 
    margin-left:105px; 
    padding-right:8px; 
} 

#halfHorizontalPanel { 
    margin-left:0px; 
    margin-right:0px; 
    background-color:white; 
    border:1px solid; 
    min-height:300px; 
} 

#lefthalfHorizontalPanel{ 
    margin:8px 0px; 
    margin-right:0px; 
    width:49.5%; 
    background-color:white; 
    border:1px solid; 
    min-height:290px; 
    float:left; 
} 


#righthalfHorizontalPanel{ 
    margin:8px 0px; 
    width:49.5%; 
    background-color:white; 
    border:1px solid; 
    min-height:290px; 
    float:right; 
} 


.btn-group-vertical-custom 
{ 
    margin-top:0px !important; 
} 

.tbl-stair { 
    border:1px solid; 
}

來源

2014-11-21 15:10:05 pbenard

謝謝！有效。你能看看小組的文字嗎？ – NeedAnswers 2014-11-21 15:19:57

檢查第一和最後一個孩子在你引導。這是你的小提琴。

.btn-group-vertical > .btn:first-child:not(:last-child) { 
     border-top-right-radius: 4px; 
     border-bottom-right-radius: 0px; 
     border-bottom-left-radius: 0px; 
    }

你可以看到有一個邊界半徑。嘗試使用代碼檢查器或類似的東西來查看應用於您的元素的類

來源

2014-11-21 15:10:21 user1709251

刪除按鈕的彎曲邊緣及調整面板的文本

回答

相關問題