Question

我正在尝试调整md按钮的高度，这非常令人沮丧。我已经硬编码了＆lt; button-container＆gt;元素高25 px，这是我想要按钮的高度。但是，悬停动画仍会溢出此高度，如下所示：

但是，当我进入并为按钮本身添加25px高度时，它似乎会抵消内容，如下所示：

任何人都知道如何编写一种可以解决此问题的样式？我不太确定为什么将高度硬编码到按钮会导致文本掉到底部。

这是我的HTML：

<div id="buttons-container">

    <button 
        md-button
        id="add-track-button" 
        (click)="addTrack()"
    >
        <md-icon>add</md-icon> 
        <span>Add Track</span>  
    </button>

    <button 
        md-button
        id="delete-track-button"
        [disableRipple]="true"
        [disabled]="this.tracksArray.length === 0"
        (click)="toggleDeleteTrackMode()"
    >
        <md-icon>delete</md-icon> 
        <span>Delete Tracks</span>
    </button>

    <button 
        md-button
        id="add-marker-button"
        [disableRipple]="true"
        (click)="toggleAddMarkerMode()"
    >
        <md-icon>add</md-icon> 
        <span>Add Marker</span>
    </button>

    <button 
        md-button
        id="add-frame-span-button"
        [disableRipple]="true"
        (click)="toggleAddFrameSpanMode()"
   >
        <md-icon>add</md-icon> 
        <span>Add Span</span>
    </button>

</div>

这是我的CSS：

#buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    height: 25px;
    color: black;
    background-color: grey;

    button {
        font-size: 10px;
        // If this line is commented out, the text is aligned fine but the hover animation overflows
        // If it isn't, the content offsets to the bottom like in the picture above
        height: 25px;
        padding: 0px 2px;

        md-icon {
            font-size: 18px;
            height: 18px;
            width: 18px;
        }
    }

    #add-marker-button {
        md-icon {
            color: $marker-color;
        }
    }

    #add-frame-span-button {
        md-icon {
            color: $frame-span-color;
        }
    }
}

Answer 1

使用min-height，＆＃39; max-height with line-height`来获得所需的结果。

这是Inline样式示例。

<md-button  style="min-height:25px;background-color:yellow"> Button 1</md-button>
<md-button class="custome-button" style="min-height:25px;max-height:25px;background-color:red; text-align:center;line-height:25px"> Button 2</md-button>

这是工作codepen。

调整md-button奇怪行为的高度

1 个答案: