Question

在我的圈子中，我可能需要无限制地输入号码。为此，我尝试创建一个div并添加了CSS。但并非我所期望的那样。

如何使我的div始终为cirlce，仍然放置任何文本？

div{
  border:1px solid red;
  display: inline-block;
  border-radius:50%;
}

<div>10</div>
<div>1</div>
<div>888</div>

Answer 1

这对我有用。保留填充宽度的一半即可解决此问题

div{
 width:10%;height:0;font-size:20px;color:#fff;text-align:center;line-height:0;padding:5% 0;border-radius:50%;background:#09f
}

<div>33</div>
<div>1</div>
<div>888</div>

Answer 2

像这样，也许具有最小的宽度和高度

.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

Answer 3

如果您愿意使用jQuery解决方案，可以尝试一下。所有圆圈的尺寸都是相同的，并且会根据最大内容进行调整。

$(window).on('load', function (){
    var biggestElement = 0;
    $('.circle').each(function (){
        if(biggestElement < $(this).outerWidth()){
            biggestElement = $(this).outerWidth();
        }
    });
    $('.circle').css({
        width: biggestElement,
        height: biggestElement,
        'line-height': biggestElement+'px'
    });
});

div{
    border:1px solid red;
    display: inline-block;
    border-radius:50%;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<div class="circle">10000000</div>
<div class="circle">1</div>
<div class="circle">888</div>

如何使我的父母永远保持圆形？

3 个答案: