html بالعربي إضافة فاصل أنبوب بعد العناصر في قائمة unordered إلا إذا كان هذا العنصر الأخير على سطر




ws3 school html (8)

هل من الممكن أن نمط هذا أتش تي أم أل ...

<ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>

... مثله ...

... بدون إضافة فئات إلى عناصر قائمة محددة ، أو اللجوء إلى javascript؟ وإذا كان الأمر كذلك كيف؟

لا يتم إصلاح فواصل الأسطر ؛ تتوسع القائمة لتشغل مساحة إضافية ، وتكون عناصر القائمة محاذاة للوسط.


مجرد

li + li::before {
    content: " | ";
}

بالطبع ، هذا لا يحل مشكلة OP. يريد أن يخرج من القضبان العمودية في بداية ونهاية الأسطر حسب مكان كسرها. سأخرج على أحد الأطراف وأؤكد أن هذه المشكلة ليست قابلة للحل باستخدام CSS ، ولا حتى مع JS ما لم يرغب أحد في إعادة كتابة منطق كسر / تخطيط / خط تحليل محرك المتصفح بشكل أساسي.

الأجزاء الوحيدة من CSS ، بقدر ما أستطيع أن أرى ، أن "أعرف" حول كسر السطر هي ، أولاً ، العنصر الزائف من ::first-line الأول ، والذي لا يساعدنا هنا - على أي حال ، يقتصر على بعض السمات التقديمية ، ولا تعمل مع أشياء مثل :: before و :: after. الجانب الآخر الوحيد من CSS الذي يمكنني التفكير فيه إلى حد ما يفضح كسر الخطوط هو الواصلة. ومع ذلك ، فإن الوصل يتعلق بإضافة حرف (عادةً شرطة) إلى نهاية الأسطر في مواقف معينة ، بينما نشعر بالقلق هنا بشأن إزالة حرف (الخط العمودي) ، لذلك لا يمكنني رؤية كيفية تطبيق أي نوع من المنطق المرتبط بالواصلة ، حتى مع استخدام خصائص مثل hyphenate-character .

لدينا خاصية word-spacing ، والتي يتم تطبيقها داخل الخطوط ولكن ليس في بدايات ونهايات السطر ، والتي تبدو واعدة ، ولكنها تحدد عرض المسافة بين الكلمات ، وليس الحرف (الحروف) التي سيتم استخدامها.

يتساءل المرء إذا كان هناك طريقة لاستخدام خاصية text-overflow ، والتي لديها قدرة غير معروفة على أخذ قيمتين لعرض النص الزائد في كل من اليسار واليمين ، كما هو الحال في

text-overflow: '' '';

ولكن لا يبدو أن هناك أي طريقة واضحة للوصول من A إلى B هنا.


يمكنك استخدام CSS التالية لحلها.

ul li { float: left; }
ul li:before { content: "|"; padding: 0 .5em; }
ul li:first-child:before { content: ""; padding: 0; }

يجب أن تعمل على IE8 + كذلك.


قبل عرض الرمز ، من الجدير بالذكر أن IE8 يدعم :first-child ولكن ليس :last-child ، لذلك في الحالات المشابهة ، يجب عليك استخدام :first-child فئة زائفة من :first-child .

عرض

#menu{
    list-style: none;
}
#menu li{
    display: inline;
    padding: 0 10px;
    border-left: solid 1px black;
}
#menu li:first-child{
    border-left: none;
}
<ul id="menu">
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>More animals</li>
</ul>


الاستخدام :after اختيار زائف. انظر http://jsfiddle.net/A52T8/1/

<ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>

ul li { float: left; }
ul li:after { content: "|"; padding: 0 .5em; }

تصحيح:

حل jQuery:

أتش تي أم أل:

<div>
    <ul id="animals">
        <li>Dogs</li>
        <li>Cats</li>
        <li>Lions</li>
        <li>Tigers</li>
        <li>Zebras</li>
        <li>Giraffes</li>
        <li>Bears</li>
        <li>Hippopotamuses</li>
        <li>Antelopes</li>
        <li>Unicorns</li>
        <li>Seagulls</li>
        <li>Monkey</li>
        <li>Hedgehog</li>
        <li>Chicken</li>
        <li>Rabbit</li>
        <li>Gorilla</li>
    </ul>
</div>

المغلق:

div { width: 300px; }
ul li { float: left; border-right: 1px solid black; padding: 0 .5em; }
ul li:last-child { border: 0; }

مسج

var maxWidth = 300, // Your div max-width
    totalWidth = 0;
$('#animals li').each(function(){
    var currentWidth = $(this).outerWidth(),
        nextWidth = $(this).next().outerWidth();
    totalWidth += currentWidth;
    if ( (totalWidth + nextWidth) > maxWidth ) {
        $(this).css('border', 'none');
        totalWidth = 0;
    }
});

ألقِ نظرة هنا. كما أضفت المزيد من الحيوانات. http://jsfiddle.net/A52T8/10/


لقد توصلت إلى حل اليوم لا يبدو أنه هنا بالفعل ويبدو أنه يعمل بشكل جيد حتى الآن. لا تعمل الإجابة المقبولة كما هي على IE10 ولكن هذا لا. http://codepen.io/vithun/pen/yDsjf/ credit للمؤلف بالطبع!

.pipe-separated-list-container {
  overflow-x: hidden;
}
.pipe-separated-list-container ul {
  list-style-type: none;
  position: relative;
  left: -1px;
  padding: 0;
}
.pipe-separated-list-container ul li {
  display: inline-block;
  line-height: 1;
  padding: 0 1em;
  margin-bottom: 1em;
  border-left: 1px solid;
}
<div class="pipe-separated-list-container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty</li>
    <li>Twenty One</li>
    <li>Twenty Two</li>
    <li>Twenty Three</li>
    <li>Twenty Four</li>
    <li>Twenty Five</li>
    <li>Twenty Six</li>
    <li>Twenty Seven</li>
    <li>Twenty Eight</li>
    <li>Twenty Nine</li>
    <li>Thirty</li>
  </ul>
</div>


حل واحد هو نمط الحدود اليسرى مثل:

li { display: inline; }
li + li {
  border-left: 1px solid;
  margin-left:.5em;
  padding-left:.5em;
}

ومع ذلك ، قد لا يمنحك ذلك نتائج مرغوبة إذا كانت القوائم بأكملها تلتف ، كما تفعل في المثال الخاص بك. أي من شأنه أن يعطي شيء من هذا القبيل:

foo | bar | baz
 | bob | bill
 | judy

أعرف أنني متأخرة قليلاً للحفل ، لكن إذا كان بإمكانك تحمل وضع الخطوط لليسار ، فإن أحد الاختراقات هو وضع الأنابيب قبل العناصر ثم وضع قناع فوق الحافة اليسرى ، وهو ما يعني:

li::before {
  content: " | ";
  white-space: nowrap;
}

ul, li {
  display: inline;
}

.mask {
  width:4px;
  position: absolute;
  top:8px; //position as needed
}

مثال أكثر اكتمالا: http://jsbin.com/hoyaduxi/1/edit








css