边框高度显示不正确

Question

我一直在寻找类似的问题，但找不到解决方案。当我插入未显示正确高度的边框时，就会出现问题。我插入了三个图像，但我试图插入一个没有成功的边框。这是学习html和CSS的做法。

HTML：

<div class="choices">

    <div class="choice" id="p">
        <img src="images/paper.png" alt=""> 
    </div>
    <div class="choice" id="r">
        <img src="images/rock.png" alt="">
    </div>
    <div class="choice" id="s">
        <img src="images/scissors.png" alt="">
    </div>
</div>

CSS：

.choices{
  padding: 0;
  margin: 50px 0px;
  text-align: center;
  position: relative; 
} 

.choice {
  display: inline;
  border: 4px solid white;
  border: 50%; 
}

输出：output in chrome

Answer 1

问题是您的.choice是display: inline，这意味着任何高度和宽度都无效。将其更改为display: inline-block将解决问题。

Jsfiddle