Question

我在下面有这个按钮。它工作正常但我希望它能够改变大小以适应不同的文本长度和大小。例如，如果我增加字体大小，如果字体太大（文本将超出按钮边界），按钮将变大。我该怎么做？

另外，为什么引导程序使文本看起来比我预期的要低一点？（垂直居中）

.round-btn {
    margin: 0 auto;
    display:block;
    width:150px;
    height:150px;
    line-height:150px;
    border: 5px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    background-color: #17BAEF;
    font-size:20px;
    font-weight:bold;
   text-decoration: none;
   
  
}
.round-btn:hover {
   color: #17BAEF;
   background-color: #f5f5f5;
   text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a class="round-btn" href="#">Button</a>

Answer 1

摆脱固定的宽度和高度，将其设置为最小值，添加填充以在文本和圆形边框之间有适合的空间，然后通过javascript设置宽度和高度。这是实现这一目标的唯一方法，因为您需要一个方形元素：

$(function() {
  var $elem = $(".round-btn");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

您还可以循环所有按钮以定位所有按钮。

Answer 2

抛弃宽度，高度和线高。

按钮显示：内联块并使用填充：

https://jsfiddle.net/2b29j5pm/

.round-btn {
    margin: 0 auto;
    padding: 40px 30px;
    display:inline-block;
    border: 5px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    background-color: #17BAEF;
    font-size:20px;
    font-weight:bold;
    text-decoration: none;
}

.round-btn:hover {
   color: #17BAEF;
   background-color: #f5f5f5;
   text-decoration: none;
}

我对答案并不是百分之百满意，因为你需要使用填充，但希望它能为你提供纯CSS答案的另一种选择。

圆形按钮，可容纳文本

2 个答案: