私はコードを持っています:
<div>C</div><div>A</div>
div{
border: 4px solid Brown;
display: inline;
}
そのため、文字が入った 2 つの四角形ができあがります。
代わりに正方形として表示したかったのです。したがって、現在、それらは幅よりも高さが長方形です。
完全な正方形になるようにスタイルを設定する方法を知っている人はいますか?
私はコードを持っています:
<div>C</div><div>A</div>
div{
border: 4px solid Brown;
display: inline;
}
そのため、文字が入った 2 つの四角形ができあがります。
代わりに正方形として表示したかったのです。したがって、現在、それらは幅よりも高さが長方形です。
完全な正方形になるようにスタイルを設定する方法を知っている人はいますか?
inline-block
明示的な幅と高さを指定できるように、ディスプレイを に設定する必要があります。
div {
display: inline-block;
width: 1.25em;
height: 1.25em;
line-height: 1.25em;
}
これがフィドルです:http://jsfiddle.net/TKQzT/13/
文字は幅よりも高いため、ボックスの幅/高さを手動で設定する必要があります。
私が知っているより良い方法は、インラインブロック表示を使用して高さと幅を修正することです。
これを試して :
div{
display: inline-block;
height: 1em;
width: 1em;
border: 4px solid Brown;
line-height: 1em;
text-align:center
}
幅と高さを等しくしないと正確にはなりませんが、試してください:
div {
border: 4px solid Brown;
display: inline;
padding:2px 5px;
margin:1px
}
を使用している場合は、 ' s を並べてinline
並べることができます。このようにして、それらに明示的なandを与えることができます。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