关于html：如何在语义UI中使按钮真正变为圆形

How to make a button truly circular in Semantic UI

如果将circular类添加到带有单词的按钮中，则该按钮实际上并不会变成圆形，而只是一个带有圆角的矩形：

enter

1
2
3

A button

<i class="right arrow icon">

编辑：另外，制作带有文本的圆形按钮的简便方法是什么？我对使用语义UI毫不犹豫。

相关讨论

要使按钮成为圆形，您必须使其高度与宽度完全相同。由于button元素是inline-block，因此它的宽度取决于它的内容，因此您需要一些JavaScript才能将宽度设置为该元素的line-height。

我在循环中添加了一个新类，还设置了content的行高(以确保箭头也居中)。

检查此示例：

1
2
3

$('.full-circle').each(function() {
$(this).css('lineHeight', $(this).width() + 'px');
});

1
2
3

.full-circle.ui.animated.button .hidden.content {
line-height: 100%;
}

1
2
3
4
5
6