首页 文章

离子离子导航按钮大小和风格

提问于
浏览 次
2

我正在尝试制作具有 Headers 高度全尺寸的离子导航按钮 . 我想得到这个

enter image description here

但是下面我得到了这个，不太正确：第一个按钮填充 Headers 高度，但第二个按钮保持填充 Headers 内部（注意： Headers 背景为白色） .

enter image description here

HTML

<ion-nav-buttons side="left" >
    <button class="icon button-custom ion-navicon" menu-toggle="left">
    </button>
  </ion-nav-buttons>

CSS

.button-custom,
.button-custom.icon:before{
  font-size: 34px !important;
  border-style: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
  padding: 0;
  background-color: #ed4949;
  color: white;
}

是否有可能使第二个图像样式与第一个相同？

html css angularjs ionic-framework

1 回答

  • 0

    改变顺畅的css：

    .button-custom,
.button-custom.icon:before{
  font-size: 34px !important;
  border-style: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #ed4949;
  color: white;
}
.button-custom {
    margin: -5px 0 -5px -5px!important;
}

    似乎要解决它，但也许还有更好的方法吗？！为了将来参考我会留在这里，如果它可以帮助任何人......

    回复于

相关问题