多个元素的inline-block能否呈现出和Table中的td一样的宽度均分?_html/css_WEB-ITnose
现有个需求,就是做页面底部的tab按钮,比如
外框为了自适应页面宽度,使用nav{ width:100%; }的样式定义,而a元素作为tab按钮,使用了display:inline-block;height:60px;width:25%;这样定义,可以满足任何宽度下都能自适应。
现在的问题来了,由于服务端需要考虑权限的问题,这些按钮在某些权限下需要全部显示,而在某些权限下只能显示3个,而这里如果宽度在css中定义死了25%的话,如果仅显示3个按钮,美观度显然满足不了要求。虽然通过js能够对其进行修改,但个人的原则是能通过css解决的样式问题就不话费js的开销了。
所以想问下,就inline-block如何可以实现系列的宽度自适应。类似于原先的td特性,否则真心想直接用table布局这里了。
回复讨论(解决方案)
使用table+td的情况忽略了一个问题,未定义宽度的td将会导致td宽度会按td内容进行自动调整,所以会出现tab按钮宽度在按钮内容不一致的情况下宽度各不相同,也比较丑,疏忽了这个特性。临时用js解决吧,大家如果知道的不吝赐教。
html5是可以的
楼上,具体方法呢,给个提示也好
目前的做法都是用JS来控制需要局分的inline-block元素的width的百分比,比如有5个元素,那么就是100/5+"%",配到比较纠结的就是除不尽的情况,比如3个的情况,暂时先结贴

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
