带有 2 行文本的按钮比带有 1 行文本的按钮大，但我需要它们都与 1 行的大小相同答案

【问题标题】：buttons with 2 lines of text are larger than buttons with 1 line of text, but i need them all to be the same size as the 1 line带有 2 行文本的按钮比带有 1 行文本的按钮大，但我需要它们都与 1 行的大小相同
【发布时间】：2019-02-19 03:08:54
【问题描述】：

我网站上的按钮会根据文本的数量来调整大小。当有 2 行时，按钮大于 1 行的按钮。我该如何解决这个问题？

这曾一度被修复，但又被破坏了。这当然不是它的全部代码，

.wp-block-column {
  margin-bottom: 0;

  @include desktop {
    height: 138px;
    height: 252px;
    flex-basis: auto;
    font-size: 30px;
    line-height: 36px;
    width: 357px;
    height: 238px;
  }
}

.wp-block-button {
  height: 100%;
}

.wp-block-button__link {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wp-block-columns {
  justify-content: center;
}

.all-button {
  border-radius: 1rem;

  text-transform: uppercase;
  text-align: center;
  font-family: 'Lato-Bold';
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    opacity: 0.5;
  }

  @include desktop {
    width: 355px;
    margin: 0;
    font-size: 1.67rem;
    margin: $base__space-unit;

    border-radius: 8px;

    a {
      font-size: 30px;
      height: 100%;
      width: 100%;
      #text {
        margin: auto;
      }
    }
  }
}

我希望所有按钮的大小都相同

【问题讨论】：

我们可以看看你的html代码吗？
如果您希望它们具有特定大小，请将 width 和 height 属性添加到 CSS 类，否则它们将与包含其内容所需的一样大

标签： php html wordpress css

【解决方案1】：

给他们准确的高度，例如。

.all-button {
  height: 42px; //Put here size you want
}

或给white-space: nowrap;

【讨论】：

你的空白 nowrap 工作得很好。我需要为按钮保持所有相同的尺寸，所以我认为我可以不用空格而不换行

【解决方案2】：

你可以试试这个：

.all-button {
    width: 150px; 
    //or whatever fits your theme
    height: 50px;
    //or whatever fits your theme
}

通过添加上述代码，您可以为按钮提供准确的高度和宽度。

【讨论】：