ホームページ  >  記事  >  ウェブフロントエンド  >  複数の要素のインラインブロックは、テーブルの td と同じ幅分布を示すことができますか? _html/css_WEB-ITnose

複数の要素のインラインブロックは、テーブルの td と同じ幅分布を示すことができますか? _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:32:161213ブラウズ

現在の要件は、ページの下部にタブ ボタンを作成することです (
) void(0)">A2A3A4


ページの幅に合わせるために、外枠はnav{width:100%;} のスタイル定義、a 要素はタブボタンとして機能し、このように定義された display:inline-block;height:60px; を使用するため、任意の幅に適応できます。

ここで問題が発生します。サーバーはアクセス許可を考慮する必要があるため、これらのボタンはすべて特定のアクセス許可の下で表示される必要があります。また、ここでは幅が CSS で定義されている場合は 25% になります。 、ボタンが 3 つしか表示されない場合、見た目の美しさは明らかに要件を満たしていません。 js を通じて変更することもできますが、私の個人的な原則は、css を通じて解決できるスタイルの問題は js のオーバーヘッドがかからないということです。

それでは、inline-block が系列の幅の適応をどのように実現できるのかを尋ねたいと思います。元の td 機能と似ていますが、そうでない場合は、ここでテーブル レイアウトを直接使用したいと考えています。


ディスカッションへの返信 (解決策)

幅が定義されていない td を使用すると、td の幅が td の内容に応じて自動的に調整されるため、問題が無視されます。ボタンの内容に一貫性がない場合、タブ ボタンの幅が異なって見えるため、この機能は無視されます。 jsを使って一時的に解決してみますのでご存知の方、アドバイスをお願いします。

html5 は可能です

上の方、具体的な方法は何ですか、ヒントをお願いします

現在のアプローチは、分割する必要があるインラインブロック要素の幅のパーセンテージを制御するために JS を使用することです。要素が5つある場合、100/5+「%」になります。 3の場合など、削除できない場合は、とりあえず縛ります