Html 删除离子标题中的边框底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27123773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove border bottom in ion header
提问by Ludovico Loreti
I have a problem trying to remove ion header border bottom in my ionic app
我在尝试删除离子应用程序中的离子标题边框底部时遇到问题
Here is the code of tab-home.html:
这里是代码tab-home.html：
<ion-view hide-nav-bar="true">
<ion-header-bar align-title="left" class="bar-transparent" >
<button menu-toggle="left" class="button button-icon ion-ios7-settings">
</button>
<div class="title"> </div>
<h1 class="title">proximiti</h1>
</ion-header-bar>
<!--<ion-nav-bar class="bar-transparent">
</ion-nav-bar>-->
<ion-pane ng-controller="CardsCtrl">
<!--<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon ion-navicon"></button>
</ion-nav-buttons>-->
<td-cards>
<td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
<div class="image">
<!--<div class="yes-text" ng-style="leftTextOpacity">LIKE</div>-->
<img ng-src="{{card.image}}">
<!--<div class="no-text" ng-style="rightTextOpacity">NOPE</div>-->
</div>
</td-card>
</td-cards>
</ion-pane>
</ion-view>
As you can see here the part we're interested in:
正如你在这里看到的我们感兴趣的部分：
<ion-view hide-nav-bar="true">
<ion-header-bar align-title="left" class="bar-transparent" >
<button menu-toggle="left" class="button button-icon ion-ios7-settings">
</button>
<div class="title"> </div>
<h1 class="title">proximiti</h1>
</ion-header-bar>
I tried everything (in the browser i don't see this border!), but nothing to change it! Anyone could help me trying to find the way to delete that border? N.B. : also tried to edit ionic.css and changed only in the browser.
我尝试了一切（在浏览器中我没有看到这个边框！），但没有任何改变！任何人都可以帮助我找到删除该边框的方法吗？注意：还尝试编辑 ionic.css 并仅在浏览器中更改。
EDIT: And it should be hidden only in this view, so where the class is bar-transparent
编辑：它应该只隐藏在这个视图中，所以类是条形透明的
回答by H S Progr
By using ionic-header no-border, all borders will be removed.
通过使用 ionic-header no-border，将删除所有边框。
<ion-header no-border>
回答by BenNov
No problem,
没问题，
Just add this to your custom CSS:
只需将其添加到您的自定义 CSS 中：
.bar-header {
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
回答by Tommaso Resti
@BenNov answer doesn't work for me.
@BenNov 答案对我不起作用。
this is what i did to remove ion-nav-bar bottom border
这就是我为删除 ion-nav-bar 底部边框所做的
.bar {
background-size: 100% 0px;
}
I'm working with ionic-1.0.0-rc.4
我正在使用 ionic-1.0.0-rc.4
回答by Tahmina Khatoon
For ionic 5, it should be
对于离子 5，它应该是
<ion-header class="ion-no-border"></ion-header>
回答by angelhernandez
Option 1: Using overflow CSS property
选项 1：使用溢出 CSS 属性
ion-header {
overflow: hidden;
}
Option 2: Using the no-border proterty of
选项 2：使用无边界特性
<ion-header no-border><ion-header>
回答by Morris Mukiri
This removed the border between the header and tabs for me on ionic 1.1.0
这为我在 ionic 1.1.0 上删除了标题和选项卡之间的边界
.bar-header {
box-shadow: none;
height: 45px;
}
