在圆周边框中添加文本

Question

下面的代码添加了一个单选按钮，其中包含一个边框内的数字，但是边框应该是圆圈，如何使其圆圈呢？

注意，文本的位置非常重要，不受css的影响。

​

 p {
 outline-style: solid;
 padding : 16px;
     position: absolute;

 }

<p><input type="radio">1</p>

​

Answer 1

使用border和border-radius属性而不是outline-style

​

 p {
   border: 3px solid #000;
   border-radius: 50%;
   height: 45px;  
   line-height: 45px;
   position: absolute;
   text-align: center;
   width: 45px;
 }

<p><input type="radio">1</p>

​

正如您所看到的，您可能还需要更改高度和宽度元素，以确保元素是一个完美的圆圈(好的，方形的)。