सीएसएस: कई कॉलम उल में अंतिम ली पर सीमा-तल गलत स्थिति

Question

पर दिखाई देता है मेरे पास 2 कॉलम के साथ <ul> है।

border-bottom पहले कॉलम में अंतिम आइटम के दूसरे कॉलम के शीर्ष पर दिखाई देता है।

बेला देखें: https://jsfiddle.net/6b7bkomo/

ul { 
 
    column-count: 2; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    border-bottom: 1px solid red; 
 
    box-sizing: border-box; 
 
}

<ul> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li>d</li> 
 
    <li>e</li> 
 
    <li>f</li> 
 
    <li>g</li> 
 
</ul>

केवल सूची आइटम की विषम संख्या के साथ होता है। क्रोम और एज में होता है, फ़ायरफ़ॉक्स में नहीं होता है।

ऐसा क्यों होता है?

मैं इसे कैसे ठीक कर सकता हूं?

धन्यवाद!

Answer 1

आप अपने <li> तत्व को break-inside: avoid-column; जोड़ने के लिए:

ul { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
      column-count: 2; 
 
} 
 
li { 
 
    break-inside: avoid-column; 
 
    list-style-type: none; 
 
    border-bottom: 1px solid red; 
 
}

<ul> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li>d</li> 
 
    <li>e</li> 
 
    <li>f</li> 
 
    <li>g</li> 
 
</ul>

आप दो स्तंभों को परिभाषित है, तो 7 <li> तत्वों इन दो कॉलम में ले जाया गया बराबर हैं। पहली कॉलम से शुरू होने वाली चौथी पंक्ति और दूसरे कॉलम में समाप्त होने (पहले कॉलम पर 50%/50% दूसरे कॉलम)।

Answer 2

आप column-break-insideli तत्व के अंदर उपयोग कर सकते हैं

ul { 
 
    column-count: 2; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    border-bottom: 1px solid red; 
 
    box-sizing: border-box; 
 
    column-break-inside: avoid; 
 
    -webkit-column-break-inside: avoid; 
 
    break-inside: avoid-column; 
 
}

<ul> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li>d</li> 
 
    <li>e</li> 
 
    <li>f</li> 
 
    <li>g</li> 
 
</ul>

Answer 3

नीचे कोड की जाँच करें; यह आपकी मदद कर सकता है। मैंने इस कोड की जांच की; यह ठीक काम कर रहा है।

<style> 
.menus 
{ 
    column-count: 2; 
} 

.menus li 
{ 
    list-style-type: none; 
    border-bottom: 1px solid red; 
    box-sizing: border-box; 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside:avoid; 
    -moz-page-break-inside:avoid; 
    page-break-inside: avoid; 
    break-inside: avoid-column; 
    } 
</style> 

<ul class="menus"> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
    <li>g</li> 
</ul>