css - 如何使带有文本的内联 div 成为完美的正方形

Question

我有代码：

<div>C</div><div>A</div>

div{
            border: 4px solid Brown;
display: inline;
}

所以我最终得到了两个带有字母的矩形。

我希望它们改为显示为正方形。所以目前它们是比宽度高的矩形。

有谁知道如何设计它们以使它们成为完美的正方形？

score 3 · Accepted Answer

您必须将显示设置为inline-block，以便您可以指定明确的宽度和高度：

div {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
}

score 0 · Accepted Answer

0

由于字母高于宽度，您必须手动设置框的高度/高度。

于 2012-07-17T22:03:25.300 回答

score 0 · Accepted Answer

如果不给它们相等的宽度和高度，这将是不准确的，但请尝试：

div {
  border: 4px solid Brown;
  display: inline;
  padding:2px 5px;
  margin:1px
}

如果您使用的只是这样您可以并排inline排列' ，那么我建议使用's not 。这样你就可以给他们一个明确的and 。divfloatdivinlinewidthheight

div {
  border: 4px solid Brown;
  padding:2px 5px;
  margin:1px; 
  float:left
}

score 0 · Accepted Answer

我知道的更好的方法是固定高度和宽度，同时使用内联块显示来做到这一点。

试试这个：

div{
    display: inline-block;
    height: 1em;
    width: 1em;
    border: 4px solid Brown;
    line-height: 1em;
    text-align:center
}

4 回答 4