0

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

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

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

http://jsfiddle.net/TKQzT/

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

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

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

4

4 に答える 4

3

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

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

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

于 2012-07-17T22:03:52.410 に答える
0

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

于 2012-07-17T22:03:25.300 に答える
0

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

これを試して :

div{
    display: inline-block;
    height: 1em;
    width: 1em;
    border: 4px solid Brown;
    line-height: 1em;
    text-align:center
}
​
于 2012-07-17T22:06:46.237 に答える
0

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

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

于 2012-07-17T22:04:47.203 に答える