如何在语义UI中使按钮真正循环

时间:2016-09-09 20:59:25

标签: html css semantic-ui

如果我将<div id="my-button" class="ui circular animated button" tabindex="0"> <div class="visible content">A button</div> <div class="hidden content"> <i class="right arrow icon"></i> </div> </div> 类添加到包含单词的按钮中,则该按钮实际上不会变成圆形,只是一个带有圆边的矩形:

enter image description here

如何让按钮变成圆圈?我希望它的直径与上面的直径相同,但在顶部和底部有更多的填充,使它看起来像一个圆圈。

我的HTML目前看起来像这样:

#!/bin/bash

# Format EBS volumes
yum install -y xfsprogs
parted /dev/sdb mktable gpt
parted -a optimal /dev/sdb mkpart primary xfs 0% 100%
parted /dev/sdb name 1 p4db
mkfs -t xfs /dev/sdb1
xfs_admin -L p4db /dev/sdb1

编辑:或者,制作带有文字的圆形按钮的简单方法是什么?我不太习惯使用Semantic UI。

1 个答案:

答案 0 :(得分:1)

要使按钮成圆角,您必须使其高度与其宽度完全相同。由于button元素是内联块,因此它的宽度取决于它的内容,因此您需要一些javascript来将宽度设置为该元素的line-height

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

检查此示例:

&#13;
&#13;
$('.full-circle').each(function() {
  $(this).css('lineHeight', $(this).width() + 'px');
});
&#13;
.full-circle.ui.animated.button .hidden.content {
  line-height: 100%;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" />
<div id="my-button" class="ui circular animated button full-circle" tabindex="0">
    <div class="visible content">A button</div>
    <div class="hidden content">
        <i class="right arrow icon"></i>
    </div>
</div>
&#13;
&#13;
&#13;