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

Question

我有代码：

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

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

http://jsfiddle.net/TKQzT/

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

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

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

Answer 1

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

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

这是小提琴：http://jsfiddle.net/TKQzT/13/

Answer 2

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

Answer 3

如果不给它们相同的宽度和高度，那就不准确了，但试试：

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

如果您正在使用inline，那么您可以将div并排排列，那么我建议您使用float并拥有div不是inline。这样，您就可以明确width和height。

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

在此处查看演示：http://jsbin.com/ojumay/edit#html,live

Answer 4

我知道这样做的更好方法是修复高度和宽度，同时使用内联块显示来实现它。

试试这个：

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