时间戳

首页 > 解决方案 > 按钮正在调整到它的容器，不能让它变小

html - 按钮正在调整到它的容器，不能让它变小

问题描述

我想让按钮变小，特别是垂直，但我不能，我认为这是因为它正在调整父级和字体大小。

这是一个重现我的问题的示例

.justify-between {
    justify-content: space-between;
}

.flex-row {
    flex-direction: row;
}
.flex {
     display: flex;
}

.text-4xl {
    font-size: 2.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.text-2xl {
   font-size: 1.5rem;
}
.rounded-lg {
   border-radius: 0.5rem;
}

.blue {
  background: blue;
}
<div class="flex flex-row justify-between blue">
  <h1 class="text-4xl">title</h1>
   <button class="px-6 py-2 rounded-lg text-2xl mr-2">
     Show
   </button>
</div>

我怎样才能做到这一点？

标签： htmlcss

解决方案

因为默认display: flex有。align-items: stretch

添加align-items:center到.flex或添加align-self: center到button

.justify-between {
  justify-content: space-between;
}

.flex-row {
  flex-direction: row;
}

.flex {
  display: flex;
  /* added */
  align-items: center;
}

.text-4xl {
  font-size: 2.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.blue {
  background: blue;
}
<div class="flex flex-row justify-between blue">
  <h1 class="text-4xl">title</h1>
  <button class="px-6 py-2 rounded-lg text-2xl mr-2">
     Show
   </button>
</div>

推荐阅读