CSSを使用して水平方向にHTML要素に合わせてサイズを変更するにはどうすればよいですか？

Question

CSSを使用してSafari/Chromeタブをエミュレートしようとしています（テーブルを使用しないで）。

すべての要素は、バーに（表示：インラインブロック）としてインラインで表示されます。そのバーは、ウィンドウのサイズを変更するコンテナのブロックです。

要素をそのバーに追加する最も簡単な方法は、テーブルレイアウトが固定されたテーブルの列と同じようにフィッティングされない場合にサイズが変更されるようにすることです。

ありがとうございました。

Answer 1

あなたの代わりにdisplay: inline-blockのdisplay: table-cellを使用する必要があります - これは、常に全体のバーの上の要素をレイアウトします

ul { 
 
    display: table; 
 
    width:100%; 
 
    padding: 0; 
 

 
    border: 1px solid #000 
 
} 
 

 
li { 
 
    display: table-cell; 
 
    text-align: center; 
 
    width: auto; 
 

 
    border: 1px solid #c00 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
</ul>