ตัวแยกสำหรับการนำทาง

ฉันต้องการเพิ่มตัวคั่นระหว่างองค์ประกอบของการนำทาง ตัวคั่นคือภาพ

โครงสร้าง HTML ของฉันเป็นเหมือน: ol > li > a > img.

ฉันมาถึงสองวิธีที่เป็นไปได้:

1. หากต้องการเพิ่มliแท็กสำหรับการแยก (โห่!)
2. รวมตัวคั่นในรูปภาพของแต่ละองค์ประกอบ (ซึ่งดีกว่า แต่มีความเป็นไปได้ที่ผู้ใช้อาจคลิกเช่น "หน้าแรก" แต่ไปที่ "บริการ" เนื่องจากเป็นตัวคั่นที่อยู่ด้านหลังอีกอันและผู้ใช้อาจคลิกตัวคั่นที่ เป็นของ "บริการ");

จะทำอย่างไร?

เพียงใช้ภาพคั่นเป็นภาพพื้นหลังบนไฟล์li.

หากต้องการให้ปรากฏเฉพาะระหว่างรายการให้วางตำแหน่งภาพทางด้านซ้ายของรายการliแต่ไม่ใช่ภาพแรก

ตัวอย่างเช่น:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

CSS นี้จะเพิ่มอิมเมจให้กับทุกรายการที่ตามหลังรายการอื่นหรืออีกนัยหนึ่งคือทั้งหมดยกเว้นรายการแรก

NB. โปรดทราบว่าตัวเลือกที่อยู่ติดกัน (li + li) ไม่ทำงานใน IE6 ดังนั้นคุณจะต้องเพิ่มภาพพื้นหลังให้กับ li แบบเดิม (ด้วยสไตล์ชีตแบบมีเงื่อนไข) และอาจใช้ขอบด้านลบกับขอบด้านใดด้านหนึ่ง

หากไม่มีความจำเป็นเร่งด่วนในการใช้รูปภาพสำหรับตัวคั่นคุณสามารถทำได้ด้วย CSS บริสุทธิ์

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

สิ่งนี้ทำให้แถบระหว่างแต่ละรายการเช่นเดียวกับภาพในคำถามเดิมที่อธิบายไว้ แต่เนื่องจากเราใช้ตัวเลือกที่อยู่ติดกันจึงไม่ได้วางแถบไว้ก่อนองค์ประกอบแรก และเนื่องจากเราใช้:beforepseudo selector จึงไม่ได้ใส่ไว้ตอนท้าย

คุณสามารถเพิ่มliองค์ประกอบหนึ่งที่คุณต้องการเพิ่มตัวแบ่ง

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

ใน CSS คุณสามารถเพิ่มโค้ดต่อไปนี้

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

สิ่งนี้จะเพิ่มความเร็วในการดำเนินการเนื่องจากจะไม่โหลดภาพใด ๆ แค่ทดสอบ .. :)

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

ดังนั้น:

กรณี: หลังจาก

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

กรณี: ก่อน

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

เพื่อให้ตัวคั่นอยู่ตรงกลางในแนวตั้งโดยสัมพันธ์กับข้อความเมนู

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

เพิ่มตัวคั่นลงในliพื้นหลังและตรวจสอบให้แน่ใจว่าลิงก์ไม่ขยายจนครอบคลุมตัวคั่นซึ่งหมายความว่าตัวคั่นจะไม่สามารถคลิกได้

สำหรับผู้ที่ใช้Sassฉันได้เขียนmixinเพื่อจุดประสงค์นี้:

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

ตัวอย่าง:

@include addSeparator('li', '|', 1em);

ซึ่งจะให้สิ่งนี้แก่คุณ:

li+li:before {
  content: "|";
  padding: 0 1em;
}

ฉันเชื่อว่าทางออกที่ดีที่สุดสำหรับสิ่งนี้คือสิ่งที่ฉันใช้และนั่นคือเส้นขอบ css ตามธรรมชาติ:

border-right:1px solid;

คุณอาจต้องดูแลช่องว่างภายในเช่น:

padding-left: 5px;
padding-right: 5px;

สุดท้ายหากคุณไม่ต้องการให้ li ตัวสุดท้ายมีเส้นขอบที่แยกจากกันให้กำหนดให้เป็นลูกคนสุดท้าย "none" ใน "border-right" ดังนี้:

li:last-child{
  border-right:none;
}

โชคดี :)

ใส่เป็นพื้นหลังขององค์ประกอบรายการ:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

ต่อไปขอแนะนำให้ใช้มาร์กอัปอื่นสำหรับการช่วยสำหรับการเข้าถึง:
แทนที่จะฝังรูปภาพแบบอินไลน์ให้ใส่ข้อความเป็นข้อความล้อมรอบแต่ละรูปด้วยช่วงใช้รูปภาพเป็นพื้นหลังแล้วซ่อนข้อความด้วย display: none - this ให้ความยืดหยุ่นในการจัดรูปแบบมากขึ้นและช่วยให้คุณสามารถใช้ไทล์กับภาพ bg กว้าง 1px ช่วยประหยัดแบนด์วิดท์และคุณสามารถฝังลงใน CSS Sprite ซึ่งช่วยประหยัดการโทร HTTP:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

CSS:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

อัปเดต ตกลงฉันเห็นว่าคนอื่นได้รับคำตอบที่คล้ายกันต่อหน้าฉัน - และฉันทราบว่าจอห์นยังมีวิธีการป้องกันไม่ให้ตัวคั่นปรากฏก่อนองค์ประกอบแรกโดยใช้ตัวเลือก li + li ซึ่งหมายความว่า li ใด ๆ ก็ตามที่ตามมา ลี้