css - 完全な正方形のテキストを含むインライン div を作成する方法

Question

私はコードを持っています：

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

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

そのため、文字が入った 2 つの四角形ができあがります。

代わりに正方形として表示したかったのです。したがって、現在、それらは幅よりも高さが長方形です。

完全な正方形になるようにスタイルを設定する方法を知っている人はいますか?

score 3 · Accepted Answer

inline-block明示的な幅と高さを指定できるように、ディスプレイをに設定する必要があります。

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

これがフィドルです：http://jsfiddle.net/TKQzT/13/

score 0 · Accepted Answer

文字は幅よりも高いため、ボックスの幅/高さを手動で設定する必要があります。

score 0 · Accepted Answer

私が知っているより良い方法は、インラインブロック表示を使用して高さと幅を修正することです。

これを試して：

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

score 0 · Accepted Answer

幅と高さを等しくしないと正確にはなりませんが、試してください：

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

を使用している場合は、 ' s を並べてinline並べることができます。このようにして、それらに明示的なandを与えることができます。divfloatdivinlinewidthheight

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

ここでデモを参照してください: http://jsbin.com/ojumay/edit#html,live

4 に答える 4