css 带有表情符号的按钮与带有文本的按钮位置不同

bd1hkmkf 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(109)

我有两个按钮。
超文本标记语言：

<div style="position: fixed; right: 0; top: 0">
    <button class="top-button">
        🌎
    </button>
    <button class="top-button">
        Text
    </button> 
</div>

CSS：

.top-button {
    display: inline-block;
    cursor: pointer;
    padding: 0.25rem;
    min-width: 2rem;
    min-height: 2rem;
    background-color: rgba(180, 180, 180, 50%);
    border: none;
    box-shadow: 2px 2px 2px darkgray;
    border-radius: 5px;
    margin: 0.1rem;
}

现场示例：https://playcode.io/1629892

正如你所看到的，带有表情符号的按钮比带有文本的按钮稍微高一点。我想让两个按钮对齐。如何做到这一点？

css

来源：https://stackoverflow.com/questions/77298048/button-with-emoji-positioned-differently-than-button-with-text

1条答案

按热度按时间

6qftjkof1#

问题是你有一个不同的线高度。您可以添加到类中。top-button

line-height: 100%;

这应该可以解决了。
另一方面，我会推荐你使用flex-box，就像下面的例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div class="btn-group">
            <button class="top-button">
                🌎
            </button>
      <button class="top-button">
        Text
      </button> 
        </div>
  </body>
</html>

对于CSS：

.btn-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    right: 0;
    top: 0;
    /* Optional a gap between => gap: 10px; */
}

.top-button {
    display: inline-block;
    cursor: pointer;
    padding: 0.25rem;
    min-width: 2rem;
    min-height: 2rem;
    background-color: rgba(180, 180, 180, 50%);
    border: none;
    box-shadow: 2px 2px 2px darkgray;
    border-radius: 5px;
    margin: 0.1rem;
}

赞(0）回复(0）举报 2023-10-21

我来回答

css 带有表情符号的按钮与带有文本的按钮位置不同

1条答案

相关问题

热门标签

最新问答