有没有一种方法只能使用CSS来使按钮具有与同级按钮相同的宽度? [英] Is there a way to only use CSS in order to make a button have the same width as a sibling button?

问题描述

基本上，我有两个按钮，它们的样式相同，并且在父级 div 中彼此并排排列.

Basically, I have two buttons that have the same style and are lined beside each other inside a parent div.

<div style="text-align: center">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button2</button>
</div>



.btn {
  min-height: 44px;
  width: 100%;
  max-width: 320px;
  position: relative;
  box-sizing: border-box;
  padding: 6px 24px
  border-radius: 4px;
  outline: none;
  cursor: pointer;

  &.btn-primary {
    border: none;
    background-color: #808080;
    color: #FFFFFF;
  }

  &.button1{
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #b6b6b6;
  }

  &.button2{
    margin-left: 12px;
    width: auto;
    padding: 6px 36px;
  }
}

由于第二个按钮已翻译成多种语言，因此其宽度设置为自动.这里的问题是第一个按钮必须始终与第二个按钮具有相同的动态宽度.

Because the second button is translated in lots of languages, its width is set to auto. The problem here is that the first button must have the same dynamic width as the second one at all times.

那么，有没有一种方法可以仅通过使用CSS在第一个按钮上实现此条件?请记住，按钮排在同一行.

So, is there a way to achieve this condition on the first button by only using CSS? Keep in mind that the buttons are lined on the same row.

推荐答案

CSS网格可以做到这一点:

CSS grid can do this:

 body {
  text-align: center
 }
.container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin:10px;
}

.btn {
  min-height: 44px;
  max-width: 320px;
  box-sizing: border-box;
  padding: 6px 24px border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.btn-primary {
  border: none;
  background-color: #808080;
  color: #FFFFFF;
}

.button1 {
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #b6b6b6;
}

.button2 {
  margin-left: 12px;
  padding: 6px 36px;
}

<div  class="container">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button2</button>
</div>

<div class="container">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button with long text</button>
</div>

<div class="container">
  <button class="btn btn-primary button1">Button1</button>
  <button class="btn btn-primary button2">Button text</button>
</div>

这篇关于有没有一种方法只能使用CSS来使按钮具有与同级按钮相同的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！