मैं कुछ रिस्पॉन्सिव डिज़ाइन पर काम कर रहा हूँ, जहाँ मेरे पास ul कुछ li तत्वों के साथ, कुछ अलग-अलग टेक्स्ट लंबाई के साथ है। मैं चाहता हूं कि li तत्व ul की ऊंचाई को भरें, लेकिन मुझे इससे कुछ परेशानी हो रही है। li तत्वों की ऊंचाई भिन्न होती है, जब उनमें से किसी एक की सामग्री बहुत लंबी हो जाती है। एक उदाहरण नीचे पाया जा सकता है:

ul {
  display: flex; 
  align-items: center; 
  width: 650px; 
  background: red;
}

li {
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
  height: 100%;
}
<ul>
  <li>Longer text here 1-2-3</li>
  <li>About</li>
  <li>Payment</li>
  <li>Payment step 2</li>
  <li>Receipt</li>
</ul>

मैं li तत्वों को उनकी सामग्री की परवाह किए बिना समान ऊंचाई पर कैसे बनाऊं?

1
Loyalar 24 मार्च 2021, 14:19
मुझे यकीन नहीं है कि मेरी पोस्ट में मैंने कहा कि @ s.kuznetsov?
 – 
Loyalar
24 मार्च 2021, 14:31

1 उत्तर

सबसे बढ़िया उत्तर

align-items: center को align-items: stretch से ul में बदलें। और height: 100% को li में हटा दें।

ul {
  display: flex; 
  align-items: stretch; 
  width: 650px; 
  background: red;
}

li {
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
}
<ul>
  <li>Longer text here 1-2-3</li>
  <li>About</li>
  <li>Payment</li>
  <li>Payment step 2</li>
  <li>Receipt</li>
</ul>

जैसा कि आइटम के नाम से पता चलता है, इसका मतलब लिंक्स वाले मेनू से है?! मैं प्रत्येक li टैग के अंदर a टैग डालता हूं।

display: inherit जोड़कर माता-पिता से li फ्लेक्स नियम प्राप्त करें। और इस सीएसएस को जोड़ें जो आपके पंक्चर को लंबवत रूप से केन्द्रित करता है:

ul li a {  
  margin: auto 0 auto 0;
}
ul {
  display: flex; 
  align-items: stretch; 
  width: 650px; 
  background: red;
}

li {
  display: inherit; 
  background: orange;
  border-right: 1px solid #CCC;
  list-style: none;
  padding: 10px;
  flex: 1;
}

ul li a {  
  margin: auto 0 auto 0;
}
<ul>
  <li><a href="">Longer text here 1-2-3</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Payment</a></li>
  <li><a href="">Payment step 2</a></li>
  <li><a href="">Receipt</a></li>
</ul>
1
s.kuznetsov 24 मार्च 2021, 15:39
जोड़ने के लिए ज्यादा कुछ नहीं - इसने मेरी समस्या को पूरी तरह से ठीक कर दिया, हालांकि मुझे निश्चित रूप से सामग्री को केंद्रित रखने के लिए display: flex; align-items: center को li तत्वों में जोड़ना पड़ा। धन्यवाद!
 – 
Loyalar
24 मार्च 2021, 14:36
@ लोयलर, यदि आप li को केंद्र में रखते हैं, तो यह उन तत्वों के सापेक्ष असमान दिखाई देगा जो एक से अधिक पंक्तियों में फैले हुए हैं।
 – 
s.kuznetsov
24 मार्च 2021, 14:41
यह निश्चित रूप से सच है, लेकिन यह मेरे मामले में बेहतर दिखता है, लेकिन मैं समझता हूं कि यह सभी परिस्थितियों में नहीं होगा :)
 – 
Loyalar
24 मार्च 2021, 14:58
1
@ s.kuznetsov हां, ठीक यही मुझे चाहिए था।
 – 
Loyalar
24 मार्च 2021, 15:29
1
@ लोयलर, मैंने दूसरा स्निपेट बनाया।
 – 
s.kuznetsov
24 मार्च 2021, 15:39