无法设置离子按钮栏的高度

Question

我正在创建一个带离子框架的移动应用程序。我想将按钮栏调整到更小一点。我尝试了以下代码，似乎没有发生任何事情。

    <div class="button-bar" style="height:1%;">
        <button class="button button-outline button-full button-energized"><b>Connection</b></button>       
        <button class="button button-outline button-full button-energized"><b>
        My Music</b></button>    
    </div>

Answer 1

因为我无法在jsfiddle中实际使用离子类。请尝试以下方法：

    <div class="button-bar" style="height:50px;">
        <button class="button button-outline button-full button-energized">  <b>Connection</b></button>       
        <button class="button button-outline button-full button-energized"><b>
        My Music</b></button>    
    </div>

尝试实际使用像素值而不是％。百分比不会在此特定实例中为您提供所需的结果。百分比仅在父容器具有设定高度时才有效。

此外，您可以尝试像这样定位各个按钮：

       <div class="button-bar"">
            <button class="button button-outline button-full button-energized" style="height:50px;>  <b>Connection</b></button>       
            <button class="button button-outline button-full button-energized" style="height:50px;><b>
            My Music</b></button>    
        </div>

我个人建议创建一个单独的样式表来完成此操作，然后直接定位按钮栏或按钮：

CSS：

.button {
  height: 50px;
}

或

.button-bar {
  height: 50px;
}

Answer 2

我认为来自ionic.css的按钮上有一些最小高度添加。用.button-bar .button {min-height：some px}

覆盖它