Navigasi CSS dengan x Jumlah Tab yang memiliki padding yang sama

JIKA saya memahami semua batasan dengan benar, hal ini mudah dicapai dengan properti tampilan table dan table-cell.

Atur lebar div yang berisi Anda:

.container {
width: 800px;
}

lalu atur ul Anda agar tampilan tabel:

ul {
display: table;
width: 100%;
}

terakhir, atur li Anda menjadi sel tabel:

li {
display: table-cell;
}

Lihat contoh lengkapnya: http://codepen.io/anon/pen/IfbHs

hapus lebar untuk tabel itu akan menjadi sempurna

http://jsfiddle.net/SSq7A/2/

table {
    border-spacing: 1px;
}

td {
    padding:10px;
    background: #40404c;
    text-align: center;
    color: white;
    font-size: 11px;
}

Tidak mungkin dengan CSS Murni mengingat Batasan

Tampaknya apa yang Anda tanyakan dalam banyak kasus secara matematis tidak mungkin (kecuali panjang teksnya sama) hanya dengan css karena kendala Anda.

Pertimbangkan contoh hanya dua tab dan empat persyaratan khusus (dan bertentangan) berikut ini (asumsikan 500px wadah dengan lebar tetap; persyaratan telah disusun ulang sebagai ilustrasi):

(1) Setiap Tab memiliki lebar yang tidak diketahui (tergantung pada teks di dalamnya).

Asumsikan Tab2 memiliki teks dua kali lebih panjang dari Tab1. Jadi ilustrasinya, Tab1 = 10px, Tab2 = 20px, lalu...

(2) Semua Tab harus memiliki padding yang sama (spasi dari huruf paling luar hingga batas dalam tab harus sama, diwakili oleh ".." di atas). Padding ini tidak harus diperbaiki tetapi harus sama di antara tab-tabnya.

Dan...

(3) Tanpa Perhitungan. Semua harus berfungsi tanpa mengubah css jika satu atau lebih tab ditambahkan atau dihapus.

Cukup jelas, tapi...

(4) Tab tidak boleh meluas melebihi div tersebut, namun harus mengisinya.

Ini berarti salah satu dari berikut ini:

A. Setiap Tab akan memiliki lebar 50% dan lebar teks tetap tidak berubah, jadi Tab1 = 120px 10px 120px, Tab2 = 115px 20px 115px, yang tidak memenuhi (1) karena ukuran keseluruhan keduanya akan memiliki lebar yang sama, atau (2) karena lebar bantalan akan bervariasi sesuai ilustrasi, tetapi mungkin memenuhi (3) dan (4). Ini bukan yang Anda inginkan.

B. Setiap Tab akan memiliki lebar 50%, namun lebar teks harus melar untuk Tab1 atau kompres untuk Tab2 agar lebar teks sama . Secara teknis ini masih gagal memenuhi (1), namun memenuhi (2) & (4) karena keduanya disetel ke 120px 10px 120px atau 115px 20px 115px, karena teks terdistorsi sedemikian rupa agar "sesuai" dengan ruangnya. Apakah hal ini mungkin terjadi tanpa melakukan (3) masih dipertanyakan, namun mungkin tidak relevan, karena saya yakin ini bukan yang Anda inginkan.

C. Setiap Tab akan disetel sesuai keinginan Anda untuk (1) dan (2) dengan (2) pada jumlah tetap (misalnya 10 piksel), yang menyisakan celah di antara atau di sekitar tab, seperti 10px 10px 10px , selisih 430px, lalu 10px 20px 10px. Ini mungkin dapat memenuhi (3), tetapi tidak memenuhi (4) karena mereka tidak akan benar-benar "mengisi" ruang wadah tetap--akan ada "celah" di suatu tempat. Ini bukan yang Anda inginkan.

D. Apa yang pada akhirnya Anda inginkan adalah agar setiap Tab memiliki padding yang disetel sama, yang dapat dilakukan sehubungan dengan (1) dan (2), tetapi tidak dengan batasan Anda (3) , sebagai perhitungan diperlukan. Dalam contohnya adalah (500px - 30px) / 4 = 117.5px. Ini menjadikan tab 117.5px 10px 117.5px dan 117.5px 20px 117.5px. Namun seperti yang Anda lihat, karena teks memiliki lebar fleksibel, hal ini harus dilakukan secara dinamis, kira-kira dengan rumus:

(containerWidth - totalTextWidths) / (2 x numTabs) = padding

Jika Anda menginginkan semacam celah kecil antar tab, maka itu perlu ditambahkan ke dalam rumus (di sini diasumsikan ada celah 2 piksel, jadi gapWidths = ((numTabs - 1) x 2px)):

(containerWidth - totalTextWidths - gapWidths) / (2 x numTabs) = padding

Jadi batasan yang Anda berikan membuat solusi menjadi tidak mungkin--perhitungan harus diperbolehkan, atau Anda perlu memikirkan kembali bagaimana Anda ingin tab Anda ditampilkan.

apakah kamu mencari sesuatu seperti ini? => http://jsfiddle.net/sijav/SSq7A/12/ Saya telah menambahkan width:1%; dan keseluruhannya adalah:

td {
    padding: 5px 0;
    background: #40404c;
    text-align: center;
    color: white;
    font-size: 11px;
    width:1%;
}

Juga Menambahkan div di Tabel untuk mengatur seluruh lebar (seluruh wadah tab)
http://jsfiddle.net/sijav/SSq7A/14/

Saya merasa ini bukan yang Anda inginkan, tetapi ini menyelesaikan masalah berikut:

1. bantalan yang konsisten
2. elemen mengisi elemen
3. tidak ada perhitungan

HTML

<div class="tab-container">
    <ul class="tabs">
        <li>Tab1</li>
        <li>Tab 1 Space</li>
        <li>Tab 2 more Space</li>
        <li>Tab 3 even more Space</li>
        <li>Tab 4</li>
    </ul>
</div>

CSS

body {
    background: black;
}
.tab-container {
    display: block;
    width: 500px;
}
.tabs {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    width: 100%;
    margin: 0;
    padding: 0;
}
.tabs > li {
    display: block;
    padding: 5px;
    background: #40404c;
    text-align: center;
    white-space: nowrap;
    color: white;
    font-size: 11px;
}

Inilah biola.

Solusinya didasarkan pada asumsi bahwa elemen dapat memiliki ruang di antara mereka karena Anda tidak menyebutkan kondisi seperti ini.

Dengan solusi ini, saya menyampaikan masalah kepada Anda - dukungan browser untuk flexbox.

Informasi tentang flexbox

Anda dapat membaca di flexbox dari:

• Panduan Lengkap untuk Flexbox
• Diselesaikan oleh Flexbox

Ini pada dasarnya tidak mungkin, cara terbaik yang dapat Anda lakukan dengan CSS saja adalah pengaturan di mana Anda dapat menambahkan jumlah X tab, tetapi harus menghitung lebar tab dengan tangan, untuk mengisi wadah, misalnya dengan 4 tab Anda akan melakukan sesuatu seperti ini (perhatikan bagaimana kelas .Tab memiliki lebar 25% yaitu 100/4):

                <div id="TabsContainer">
                    <div class="Tab">
                        <div class="TabContainer">Tab 1</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 2</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 3</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 4</div>
                    </div>
                </div>

Dan CSSnya adalah:

#TabsContainer {
    font-size: 0;
    white-space: nowrap;
}
.Tab {
    display: inline-block;
    *zoom: 1;
    *display: inline;

    width: 25%;
}
.TabContainer {
    background: #f00;
    font-size: 12px;
    border-left: 1px solid #000;
    padding: 10px;
}

Masalah sebenarnya muncul pada poin kedua adalah Anda memerlukan tab untuk mengisi lebar wadah secara merata, jika Anda memeriksa rekomendasi W3C untuk properti lebar Anda akan melihat bahwa tidak ada nilai seperti "isi"

http://www.w3.org/TR/CSS2/visudet.html#the-width-property

Pada dasarnya Anda perlu mengatur persentase lebar berdasarkan elemen wadah atau lebar yang ditetapkan, tidak ada alternatif nyata (otomatis benar-benar tidak melakukan apa yang Anda inginkan, itu hanya nilai default, dan seperti yang Anda tahu DIV tidak bertindak seperti itu secara default ).

Jika Anda benar-benar membutuhkan perilaku seperti itu, maka Anda harus mempertimbangkan untuk menggunakan tabel, karena tabel dapat memenuhi lebar wadah dan kemudian Anda dapat menambahkan jumlah sel X Anda akan mendapatkan apa yang Anda butuhkan, tetapi setidaknya untuk sekarang, dengan DIV tidak mungkin menggunakan CSS saja.

Anda dapat menggunakan flexbox di sini, jika Anda ingin menempuh rute itu.

.container {
width: 800px;
}

ul {
display: flex;
width: 100%;
}

li {
flex:auto;
}

Lihat contoh lengkapnya: http://codepen.io/anon/pen/rkqtD

Namun pada akhirnya, seperti contoh lainnya, Anda harus membuat trade-off antara padding yang konsisten dan kemampuan untuk menambahkan item tanpa batas.