时间戳

首页 > 解决方案 > 不使用 div 包裹的圆形按钮

html - 不使用 div 包裹的圆形按钮

问题描述

我想做圆形按钮。在这个片段中，当屏幕很窄以至于两个按钮都不完全适合时，按钮 A 开始挤压，而按钮 B 仍然是一个圆圈（我想要的）。按钮 B 用 div 包裹，按钮 A 没有。

两个问题：

a) 为什么简单地用 div 包裹按钮 B 会使其行为不同？

b）如果可能的话，我怎样才能在没有额外 div 的情况下获得所需的行为（按钮 B）？

.counter {
  display: flex;
  margin-top: 10pt;
  background-color: #444444;
  justify-content: space-around;
  align-items: center;
  border-radius: 60pt;
  width: 100%;
  padding: 5pt;
}

button {
  outline: none;
}

.btn {
  background-color: #222222;
  border-radius: 50%;
  border: 1pt solid white;
  width: 50pt;
  height: 50pt;
  display: inline-block;
}

.btn-text {
  color: white;
  font-size: 14pt;
  text-align: center;
}

.btn:active {
  background-color: #444444;
}
<div class="counter">
  <button class="btn"><span class="btn-text">A</span></button>

  <div class="btn-div">
    <button class="btn"><span class="btn-text">B</span></button>
  </div>
</div>

https://jsfiddle.net/njto340f/3/

标签： htmlcssflexbox

解决方案

这是因为宽度随着容器调整，使其也压缩。

您必须设置min-width和min-height以确保宽度不会低于您所需的宽度并防止其缩小

.counter {
  display: flex;
  margin-top: 10pt;
  background-color: #444444;
  justify-content: space-around;
  align-items: center;
  border-radius: 60pt;
  width: 100%;
  padding: 5pt;
}

button {
  outline: none;
}

.btn {
  background-color: #222222;
  border-radius: 50%;
  border: 1pt solid white;
  min-width: 50pt;
  min-height: 50pt;
  display: inline-block;
}

.btn-text {
  color: white;
  font-size: 14pt;
  text-align: center;
}

.btn:active {
  background-color: #444444;
}
<div class="counter">
  <button class="btn"><span class="btn-text">A</span></button>

  <div class="btn-div">
    <button class="btn"><span class="btn-text">B</span></button>
  </div>
</div>

检查这个小提琴

来源：最小/最大宽度与宽度

推荐阅读