删除按钮的弯曲边缘及调整面板的文本

我用尽了一切我能想到的顶部和底部按键的去除弯曲的边缘，但他们将无法正常工作。我尝试这样做：

.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

删除按钮的弯曲边缘及调整面板的文本

回答

相关问题