การนำทาง CSS พร้อม x จำนวนแท็บที่มีช่องว่างภายในเหมือนกัน

หากฉันเข้าใจข้อจำกัดทั้งหมดอย่างถูกต้อง ก็ทำได้อย่างง่ายดายด้วยคุณสมบัติการแสดงผล table และ table-cell

ตั้งค่าความกว้าง div ของคุณ:

.container {
width: 800px;
}

จากนั้นตั้งค่า ul ของคุณให้แสดงตาราง:

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

ในที่สุดให้ตั้งค่า li's ของคุณให้เป็นเซลล์ตาราง:

li {
display: table-cell;
}

ดูตัวอย่างเต็ม: http://codepen.io/anon/pen/IfbHs

ลบความกว้างของโต๊ะออกจะสมบูรณ์แบบ

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

table {
    border-spacing: 1px;
}

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

เป็นไปไม่ได้ด้วย Pure CSS ที่มีข้อจำกัด

ดูเหมือนว่าสิ่งที่คุณถามโดยส่วนใหญ่แล้วเป็นไปไม่ได้ในทางคณิตศาสตร์ (ยกเว้นข้อความที่มีความยาวเท่ากัน) โดยมีเพียง css เนื่องจากข้อจำกัดของคุณ

พิจารณาตัวอย่างเพียงสองแท็บและข้อกำหนดเฉพาะสี่รายการ (และขัดแย้งกัน) ต่อไปนี้ของคุณ (สมมติว่า 500px คอนเทนเนอร์ที่มีความกว้างคงที่ มีการจัดลำดับข้อกำหนดใหม่เพื่อให้เห็นภาพ):

(1) แต่ละแท็บมีความกว้างที่ไม่รู้จัก (ขึ้นอยู่กับข้อความที่อยู่ภายใน)

สมมติว่า Tab2 มีข้อความยาวเป็นสองเท่าของ Tab1 ดังนั้นสำหรับภาพประกอบ Tab1 = 10px, Tab2 = 20px จากนั้น...

(2) แท็บทั้งหมดควรใช้ช่องว่างภายในเดียวกัน (ช่องว่างจากตัวอักษรส่วนใหญ่ด้านนอกถึงขอบด้านในของแท็บควรเหมือนกัน โดยแสดงด้วย ".." ด้านบน) ช่องว่างภายในนี้ไม่จำเป็นต้องได้รับการแก้ไข แต่ควรเหมือนกันในแท็บต่างๆ

และ...

(3) ไม่มีการคำนวณ ทั้งหมดควรใช้งานได้โดยไม่ต้องแก้ไข css หากมีการเพิ่มหรือลบแท็บอย่างน้อยหนึ่งแท็บ

อธิบายตนเองเพียงพอ แต่...

(4) แท็บไม่ควรขยายเกิน div นั้น แต่ ควรกรอกข้อมูล

นี่หมายถึงอย่างใดอย่างหนึ่งต่อไปนี้:

ก. แต่ละแท็บจะมีความกว้าง 50% และความกว้างของข้อความยังคงไม่เปลี่ยนแปลง ดังนั้น Tab1 = 120px 10px 120px, Tab2 = 115px 20px 115px ซึ่งไม่ตรงตาม (1) เนื่องจากขนาดโดยรวมของทั้งสองจะมีความกว้างเท่ากัน หรือ (2) เนื่องจากช่องว่างภายในจะมีความกว้างแตกต่างกันไปตามภาพประกอบ แต่อาจเป็นไปตาม (3) และ (4) นี่ไม่ใช่ ไม่ใช่ สิ่งที่คุณต้องการ

ข. แต่ละแท็บจะมีความกว้าง 50% แต่ความกว้างของข้อความจะต้อง ยืด สำหรับ Tab1 หรือ บีบอัด สำหรับ Tab2 เพื่อให้ความกว้างของข้อความเท่ากัน . ในทางเทคนิคแล้วสิ่งนี้ยังคงล้มเหลวในการตอบสนอง (1) แต่เป็นไปตาม (2) และ (4) เนื่องจากทั้งคู่ถูกตั้งค่าเป็น 120px 10px 120px หรือ 115px 20px 115px เนื่องจากข้อความบิดเบี้ยวในทางใดทางหนึ่งเพื่อให้ "พอดี" พื้นที่ สิ่งนี้จะเป็นไปได้โดยไม่ทำ (3) หรือไม่นั้นยังเป็นที่น่าสงสัย แต่อาจไม่เกี่ยวข้อง เนื่องจากฉันแน่ใจว่านี่คือ ไม่ สิ่งที่คุณต้องการ

ค. แต่ละแท็บจะถูกตั้งค่าตามที่คุณต้องการสำหรับ (1) และ (2) โดยมี (2) ในปริมาณคงที่ (เช่น 10px) ซึ่งจะเว้นช่องว่างระหว่างหรือรอบๆ แท็บ บางอย่างเช่น 10px 10px 10px ช่องว่างของ 430px จากนั้น 10px 20px 10px สิ่งนี้อาจจะสามารถตอบสนอง (3) แต่ไม่เป็นไปตาม (4) เนื่องจากจะไม่ "เติม" พื้นที่ของคอนเทนเนอร์แบบตายตัวจริงๆ - จะมี "ช่องว่าง" อยู่ที่ไหนสักแห่ง นี่ไม่ใช่สิ่งที่คุณต้องการ

ง. สิ่งที่คุณระบุในท้ายที่สุดว่าคุณต้องการให้แต่ละแท็บมีระยะห่างจากขอบให้เท่ากัน ซึ่งสามารถทำได้ตาม (1) และ (2) แต่ไม่ใช่กับข้อจำกัดของคุณ (3) , เนื่องจากจำเป็นต้องมีการคำนวณ ในตัวอย่าง มันคือ (500px - 30px) / 4 = 117.5px ซึ่งจะทำให้แท็บ 117.5px 10px 117.5px และ 117.5px 20px 117.5px แต่อย่างที่คุณเห็น เนื่องจากข้อความมีความกว้างที่ยืดหยุ่นได้ จึงต้องดำเนินการแบบไดนามิก โดยใช้สูตรโดยประมาณ:

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

หากคุณต้องการช่องว่างเล็กๆ ระหว่างแท็บต่างๆ จะต้องเพิ่มลงในสูตร (ในที่นี้ถือว่ามีช่องว่าง 2px ดังนั้น gapWidths = ((numTabs - 1) x 2px)):

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

ดังนั้น ข้อจำกัดที่คุณให้ไว้ทำให้วิธีแก้ปัญหาเป็นไปไม่ได้ จะต้องอนุญาตให้มีการคำนวณ หรือคุณต้องคิดใหม่ว่าคุณต้องการให้แท็บแสดงอย่างไร

คุณกำลังมองหาสิ่งนี้อยู่หรือเปล่า? => http://jsfiddle.net/sijav/SSq7A/12/ ฉันได้เพิ่ม width:1%; และทั้งหมดคือ:

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

เพิ่ม div ในตารางเพื่อตั้งค่าความกว้างทั้งหมด (คอนเทนเนอร์แท็บทั้งหมด)
http://jsfiddle.net/sijav/SSq7A/14/

ฉันรู้สึกว่านี่ไม่ใช่สิ่งที่คุณต้องการจริงๆ แต่สามารถแก้ไขปัญหาต่อไปนี้ได้:

1. ช่องว่างภายในที่สอดคล้องกัน
2. องค์ประกอบเติมเต็มองค์ประกอบ
3. ไม่มีการคำนวณ

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>

ซีเอสเอส

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;
}

นี่คือซอ

วิธีแก้ปัญหาขึ้นอยู่กับสมมติฐานที่ว่าองค์ประกอบสามารถมีช่องว่างระหว่างองค์ประกอบเหล่านั้นได้ เนื่องจากคุณไม่ได้กล่าวถึงเงื่อนไขเช่นนี้

ด้วยวิธีแก้ไขปัญหานี้ ฉันขอนำเสนอปัญหาให้กับคุณ - การสนับสนุนเบราว์เซอร์สำหรับ flexbox

ข้อมูลเกี่ยวกับเฟล็กซ์บ็อกซ์

คุณสามารถอ่านต่อ flexbox ได้จาก:

• คำแนะนำฉบับสมบูรณ์เกี่ยวกับ Flexbox
• แก้ไขโดย Flexbox

โดยพื้นฐานแล้วมันเป็นไปไม่ได้ สิ่งที่ดีที่สุดที่คุณสามารถทำได้ด้วย CSS เพียงอย่างเดียวคือการตั้งค่าที่คุณสามารถเพิ่มแท็บได้ X จำนวนแท็บ แต่ต้องคำนวณความกว้างของแท็บด้วยมือเพื่อที่จะเติมคอนเทนเนอร์ เช่น ด้วย 4 แท็บที่คุณจะทำสิ่งนี้ (สังเกตว่าคลาส .Tab มีความกว้าง 25% เช่น 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>

และ CSS จะเป็น:

#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;
}

ปัญหาที่แท้จริงมาพร้อมกับจุดที่สองคือคุณต้องการให้แท็บเติมความกว้างของคอนเทนเนอร์ให้เท่ากัน หากคุณตรวจสอบคำแนะนำของ W3C สำหรับคุณสมบัติความกว้าง คุณจะเห็นว่าไม่มีค่าเช่น "เติม"

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

โดยพื้นฐานแล้ว คุณต้อง aider ตั้งค่าความกว้างเป็นเปอร์เซ็นต์ตามองค์ประกอบ conatainer หรือความกว้างที่ตั้งไว้ ไม่มีทางเลือกอื่นจริง ๆ (อัตโนมัติไม่ได้ทำสิ่งที่คุณต้องการจริงๆ มันเป็นเพียงค่าเริ่มต้น และอย่างที่คุณรู้ว่า DIV จะไม่กระทำการเช่นนั้นตามค่าเริ่มต้น ).

หากคุณต้องการพฤติกรรมประเภทนั้นจริงๆ คุณควรคิดถึงการใช้ตาราง เนื่องจากตารางสามารถรักษาความกว้างของคอนเทนเนอร์ได้ จากนั้นคุณสามารถเพิ่มเซลล์จำนวน X คุณจะได้สิ่งที่คุณต้องการอย่างแน่นอน แต่อย่างน้อยสำหรับ ตอนนี้ด้วย DIV มันเป็นไปไม่ได้ที่จะใช้ CSS เพียงอย่างเดียว

คุณสามารถใช้ flexbox ที่นี่ หากคุณต้องการไปเส้นทางนั้น

.container {
width: 800px;
}

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

li {
flex:auto;
}

ดูตัวอย่างเต็ม: http://codepen.io/anon/pen/rkqtD

อย่างไรก็ตาม ในที่สุด เช่นเดียวกับตัวอย่างอื่นๆ คุณจะต้องสร้างความแตกต่างระหว่างช่องว่างภายในที่สม่ำเสมอและความสามารถในการเพิ่มรายการที่ไม่มีที่สิ้นสุด