带有动态大小的完全圆形按钮 [英] Fully circular buttons with dynamic size

问题描述

我试图在CSS中创建循环按钮。我使用 border-radius：100％使按钮看起来像一个圆形，但它只有在我明确设置元素的宽度和高度时才起作用。但是，如果我这样做，按钮不会调整以修复较大的文本。

这是我迄今为止所尝试的：

  .round-button {width：60px;身高：60px;文字修饰：无;显示：inline-block;概要：无;光标：指针; border-style：none;白颜色; background-color：＃3498db;边界半径：100％;溢出：无; text-align：center;}。round-button：active {background-color：＃2980b9;}  

 < DIV> < button class =round-button>按钮< /按钮>< / div>< div> < button class =round-button>这段文字会溢出按钮！< / button> < / div>  

正如你所看到的，非常好，但第二个按钮中的文本溢出了它。我使用了 overflow：hidden 来防止它看起来丑陋，但我希望按照大小调整按钮大小。这是可能的吗？

解决方案

为了绘制一个圆，你需要一个方形开始。
$ b

您可以使用垂直填充以百分比值的形式插入一个高度等于宽度的伪类。 $ b

< a href =https://www.w3.org/TR/CSS2/box.html#padding-properties =nofollow> https://www.w3.org/TR/CSS2/box.html#填充属性

百分比是根据生成的框的包含块的宽度计算的，即使是填充顶部和填充底部也是如此。如果包含块的宽度取决于这个元素，那么结果布局在CSS 2.1中是未定义的。

与保证金属性不同，填充值的值不能为负数。像边距属性一样，填充属性的百分比值指的是生成的包含框的宽度。

使这个伪内联块帮助中心文字。

如果文本必须包装几行，则需要将其包装在内联块中。如果使用内联块伪。

您可以设置max和例如：

data-hide =falsedata-console =true>

。圆形按钮{最小宽度：60px;最大宽度：120像素;文字修饰：无;显示：inline-block;概要：无;光标：指针; border-style：none;白颜色; background-color：＃3498db;边界半径：100％;溢出：无; text-align：center; padding：0;}。round-button：before {content：'';显示：内联块;;垂直对齐：中部; padding-top：100％;} span {display：inline-block;垂直对齐：中部;最大宽度：90％;}。round-button：active {background-color：＃2980b9;}

 < DIV> < button class =round-button>< span>按钮< / span>< /按钮>< / div>< div> < button class =round-button>< span>此文字不应该溢出按钮！< / span>< / button> < / div>  

I am trying to create circular buttons in CSS. I use border-radius: 100% to make the button look like a circle but it only works if I explicitly set the width and height of the element. But if I do so, the buttons will not adjust to fix larger text

This is what I've tried so far:

.round-button{
  width: 60px;
  height: 60px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 100%;
  overflow: none;
  text-align: center;
}

.round-button:active{
  background-color: #2980b9;
}

<div>
  <button class="round-button">Button</button>
</div>
<div>
  <button class="round-button">This text will overflow the button!</button>  
</div>

As you can see the first button looks pretty OK, but the text in the second button overflows it. I've used overflow: hidden to prevent it from looking ugly but I would like the buttons size to adjust according to the content's size. Is that possible?

解决方案

In order to draw a circle, you need a square to start with .

You can insert a pseudo of an height equal to width using vertical padding with percentage value.

https://www.w3.org/TR/CSS2/box.html#padding-properties The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

Make this pseudo inline-block to help yoy center text.

If text has to wrap a few lines, it needs to be wraped within an inline-block .. if you use an inline-block pseudo.

You can set max and min width too.

example:

.round-button{
  min-width: 60px;
  max-width:120px;
  text-decoration: none;
  display: inline-block;
  outline: none;
  cursor: pointer;
  border-style: none;
  color: white;
  background-color: #3498db;
  border-radius: 100%;
  overflow: none;
  text-align: center;
  padding:0;
}
.round-button:before {
  content:'';
  display:inline-block;;
  vertical-align:middle;
  padding-top:100%;
}
span {
  display:inline-block;
  vertical-align:middle;
  max-width:90%;
}
.round-button:active{
  background-color: #2980b9;
}

<div>
  <button class="round-button"><span>Button</span></button>
</div>
<div>
  <button class="round-button"><span>This text should NOT overflow the button!</span></button>  
</div>

这篇关于带有动态大小的完全圆形按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！