html - 无法设置 ionic 按钮栏的高度

Question

我正在使用 ionic 框架创建一个移动应用程序。我想把按钮栏调小一点。我尝试了以下代码，但似乎没有任何反应。

    <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 中使用 ionic 类。尝试以下操作:

    <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;
}