时间戳

首页 > 解决方案 > 无论内容如何，​​都保持相同的按钮大小

html - 无论内容如何，​​都保持相同的按钮大小

问题描述

我有两个具有不同宽度值的按钮，因为内容不同。我希望的结果是两个按钮的宽度相同。

小提琴

HTML：

    <div class="options ion-text-center">
    <div class="option-container" (click)="newScenario()" style="cursor: pointer;">
      <div class="option">
        <img src="assets/icons/scenario.svg" class="option-icon">
        <label class="option-text">Create scenario</label>
      </div>
    </div>
    <div class="option-container" (click)="goToHistory()" style="cursor: pointer;">
      <div class="option">
        <img src="assets/icons/scenario.svg" class="option-icon">
        <label class="option-text">History</label>
      </div>
    </div>
  </div>

CSS：

 .options {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 15em;
  margin-top: 6em;
  grid-template-columns: auto auto;
  justify-items: center;
  float: right;

  .option-container {
    width: 100%;
    text-align: center;
    display: flex;
    border-radius: 12px;
    justify-content: right;


    .option {
      background-color: #49515C;
      // width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 2rem;
      border-radius: 12px;
      filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.4));

    


      .option-icon {
        filter: invert(100%) sepia(4%) saturate(7500%) hue-rotate(180deg) brightness(109%) contrast(122%);
        width: 45px;
        height: 45px;
      }

      .option-text {
        font-size: 20px;
        font-weight: 600;
        color: #ffffff;
        padding-left: 10px;
        font-family: "Exo 2", sans-serif;
      }
    }
  }

  .option-container:nth-child(2) {
    justify-content: left;
  }
}

我尝试的第一件事是将选项类设置为，width: 100%;但两个按钮都变大了，我想保留当前的“创建场景”按钮。

我的第二次尝试是调整“历史按钮”，&__justify-content {width: 41%;}但这不适用于响应式布局。

我怎样才能做到这一点？

标签： htmlcss

解决方案

我认为您正在寻找这两个 CSS 属性：

overflow: hidden;
white-space: nowrap;

推荐阅读