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

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

WBOY
リリース: 2016-06-24 11:32:16
オリジナル
1227 人が閲覧しました

現在の要件は、ページの下部にタブ ボタンを作成することです (
) 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の場合など、削除できない場合は、とりあえず縛ります

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート