मैं अपने नेवी बार में अपने 8 नेक्स लिंक को समान रूप से रखने की कोशिश कर रहा हूं।

यहाँ मेरा नाम HTML है:

 <nav>
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="destinations.html">Destinations</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="attractions.html">Attractions</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="media.html">Media</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="links.html">Links</a></li>
   </ul>
 </nav>

मैं एक मूल ग्रिड का उपयोग कर रहा हूं और प्रत्येक 8 लिंक को 1/8 में समान रूप से रखने की कोशिश कर रहा हूं।

ग्रिड के लिए मेरा सीएसएस:

.col-1-8 {
width:12.5% }

मैं 8 ली में से प्रत्येक के लिए इस वर्ग को लागू कर रहा हूं, लेकिन उन सभी को समान रूप से केंद्रित करने के लिए प्रतीत नहीं कर सकता।

अगर कोई यहाँ मेरी मदद कर सकता है, तो मुझे बहुत खुशी होगी!

धन्यवाद

टिम

0
Tim Williams 28 नवम्बर 2015, 22:45

2 जवाब

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

आप इसके लिए flex का उपयोग कर सकते हैं।

.nav {
  display: flex;
  justify-content: space-around;
  /* justify-content: space-between; */
  
  background: yellow;
  
  margin: 0;
  padding: 0;
  
  list-style: none;
}
<nav>
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="destinations.html">Destinations</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="attractions.html">Attractions</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="media.html">Media</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="links.html">Links</a></li>
   </ul>
 </nav>
1
Bram Vanroy 28 नवम्बर 2015, 20:09

यह कोड वही करता है जो आप प्राप्त करना चाहते हैं, मुझे लगता है कि आपने बॉक्स-साइज़िंग बॉर्डर-बॉक्स या टेक्स्ट-संरेखित केंद्र लागू नहीं किया था।

http://codepen.io/anon/pen/WQVQGr

HTML:

 <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="destinations.html">Destinations</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="attractions.html">Attractions</a></li>
      <li><a href="history.html">History</a></li>
      <li><a href="media.html">Media</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="links.html">Links</a></li>
   </ul>
 </nav>

सीएसएस:

*{
    box-sizing: border-box;
}

nav ul {
  background-color:yellow;
  overflow:auto;
  list-style:none;
  padding: 0;
  margin: 0;
  width: 800px; 
}

nav ul>li {
  float:left;
  width: 12.5%;
  text-align: center

}
2
Claudio King 28 नवम्बर 2015, 20:04