Bir menüdeki elemanlar arasındaki eşdeğer mesafe css

Bir menü yaptım ama elemanlar arasında neden eşdeğer bir mesafe olmadığını anlayamıyorum, eğer görüntünün bazılarında görülebiliyorsan tamam, bazıları değil. enter image description here Bir menüdeki elemanlar arasındaki eşdeğer mesafe css

Ve çalıştı kodu:

HTML:

<body style="background:#F0F0F0"> 
    <div class="nav" > 
    <ul> 
     <li><element>&#9917 </element> </li> 
     <li><a href="#" id="navItem"> Home </a></li> 
     <li><a href="#" id="navItem"> Mail </a></li> 
     <li><a href="#" id="navItem"> Team </a></li> 
     <li><a href="#" id="navItem"> Matches </a></li> 
     <li><a href="#" id="navItem"> Club </a></li> 
     <li><a href="#" id="navItem"> Multimedia </a></li> 
     <li><a href="#" id="navItem"> Fans </a></li> 
     <li><a href="#" id="navItem"> Shop </a><li> 
     <li><a href="#" id="navItem"> More </a> 
      <ul> 
      <li><a href="#">Messenger</a></li> 
      <li><a href="#">Games</a></li> 
      <li><a href="#">Facebook</a></li>    
     </ul> 
     </li> 
    </ul> 
    </div> 
</body>

CSS:

.nav{ 
     background-color:#660099; 
     color:white; 
     height:20px; 
     margin-top: 10px; 
     text-align: center; 
     } 
    .nav ul { 
     list-style: none; 
     text-align: center; 
     padding:0; 

    } 

    .nav a { 
     display: block; 
    } 
    .nav li li{ 
     width: 70px; 
     height: 30px; 
     display: inline-block; 
     font-size: 15px; 
     background-color: #FFFFFF; 
     padding-left: 0; 
     text-align: left; 
     margin-left: 10px; 
     } 

    .nav li { 
     width: 70px; 
     height: 50px; 
     display: inline-block; 
     float: left; 
     margin-left: 1px; 
     text-align: center; 

    } 
    .nav li ul { 
     position: absolute; 
     display: none; 
     width: inherit; 
    } 

    .nav li:hover ul { 
     display: block; 
    }

Nasıl bu sorunu çözmek için Bu menü nedir?

kaynak

2016-03-26 Bogdan Tomoiaga

flexbox ile çalışmak zorundasınız – DanyCode

ID'ler benzersiz olmalı ... '' navItem' için bir kimlik yerine bir sınıf kullanın. –

"ID" kullandığınız "HTML" 'ye dikkat edin ve "CSS" içinde "CLASS" kullandığınız – DanyCode

bir nedeni <li><a href="#" id="navItem"> Shop </a><li>

.nav{ 
 
    background-color:#660099; 
 
    color:white; 
 
    height:20px; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 
.nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding:0; 
 

 
} 
 

 
.nav a { 
 
    display: block; 
 
} 
 
.nav li li{ 
 
    width: 70px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    font-size: 15px; 
 
    background-color: #FFFFFF; 
 
    padding-left: 0; 
 
    text-align: left; 
 
    margin-left: 10px; 
 
} 
 

 
.nav li { 
 
    width: 70px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    float: left; 
 
    margin-left: 1px; 
 
    text-align: center; 
 

 
} 
 
.nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
} 
 

 
.nav li:hover ul { 
 
    display: block; 
 
} 
 
a{ 
 
    color:white; 
 
}

\t <div class="nav" > 
 
\t <ul> 
 
\t <li><element>&#9917 </element> </li> 
 
\t <li><a href="#" id="navItem"> Home </a></li> 
 
\t <li><a href="#" id="navItem"> Mail </a></li> 
 
\t <li><a href="#" id="navItem"> Team </a></li> 
 
\t <li><a href="#" id="navItem"> Matches </a></li> 
 
\t <li><a href="#" id="navItem"> Club </a></li> 
 
\t <li><a href="#" id="navItem"> Multimedia </a></li> 
 
\t <li><a href="#" id="navItem"> Fans </a></li> 
 
\t <li><a href="#" id="navItem"> Shop </a></li> 
 
\t <li><a href="#" id="navItem"> More </a> 
 
\t <ul> 
 
\t  <li><a href="#">Messenger</a></li> 
 
\t  <li><a href="#">Games</a></li> 
 
\t  <li><a href="#">Facebook</a></li>   
 
\t </ul> 
 
\t </li> 
 
\t </ul> 
 
\t </div>

Ben ebeveyn .nav ile ul li s ilk seviyesini elde etmek .nav ul > li yılında > kullanmak

bir kapanış </li> kaçırıyorsunuz demektir çünkü . .nav ul li kullanmış olsaydım, <li><a href="#">Messenger</a></li>: <li><a href="#">Messenger</a></li> gibi görünen çocuklar dahil olmak üzere, tüm lis öğelerini alırdım. Sadece menünün üst düzeyindeki boşlukları istediniz, bu yüzden >'u kullandım.

.nav{ 
 
    background-color:#660099; 
 
    color:white; 
 
    height:20px; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
} 
 
.nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding:0; 
 

 
} 
 

 
.nav a { 
 
    /*display: block;*/ 
 
    text-align: center; 
 
    color:white; 
 
} 
 
.nav li li{ 
 
    width: 70px; 
 
    /*height: 30px;*/ 
 
    display: inline-block; 
 
    font-size: 15px; 
 
    background-color: #FFFFFF; 
 
    padding-left: 0; 
 
    /*text-align: left;*/ 
 
    /*margin-left: 10px;*/ 
 
} 
 

 
.nav ul > li { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-left: 10px; 
 

 
} 
 
.nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
} 
 

 
.nav li:hover ul { 
 
    display: block; 
 
}

\t <div class="nav" > 
 
\t <ul> 
 
\t <li><element>&#9917 </element> </li> 
 
\t <li><a href="#" id="navItem"> Home </a></li> 
 
\t <li><a href="#" id="navItem"> Mail </a></li> 
 
\t <li><a href="#" id="navItem"> Team </a></li> 
 
\t <li><a href="#" id="navItem"> Matches </a></li> 
 
\t <li><a href="#" id="navItem"> Club </a></li> 
 
\t <li><a href="#" id="navItem"> Multimedia </a></li> 
 
\t <li><a href="#" id="navItem"> Fans </a></li> 
 
\t <li><a href="#" id="navItem"> Shop </a></li> 
 
\t <li><a href="#" id="navItem"> More </a> 
 
\t <ul> 
 
\t  <li><a href="#">Messenger</a></li> 
 
\t  <li><a href="#">Games</a></li> 
 
\t  <li><a href="#">Facebook</a></li>   
 
\t </ul> 
 
\t </li> 
 
\t </ul> 
 
\t </div>

Ayrıca böyle marjı ile oynayabilir: daha eşit boşluk benziyor about the >

iyi örnek

.nav ul > li { display: inline-block; float: left; margin-left: 20px; margin-right: 20px; }

kaynak

2016-03-26 19:33:08

Kaldır dan width: 70px sabit .nav li. Liste öğeleri arasında eşit mesafe elde etmek için, örneğin margin-right: 16px;'u kullanabilirsiniz.

kaynak

2016-03-26 19:37:44 Nora

Teşekkür ederim, ama gerçekten işe yaramak için nasıl başvurulacağını nereden biliyorsunuz? Yani neredeyse 2 saat boyunca pek çok şey denedim ve sonuç yok. Çalışmak için nasıl kullanılacağını nasıl anlarım? –

"HTML" Kullanmak "Kimlik" ve "CSS" in dikkat Eğer

.nav{ 
 
      background-color:#660099; 
 
      color:white; 
 
      height:20px; 
 
      margin-top: 10px; 
 
    
 
      } 
 
      
 
     .nav ul { 
 
      list-style: none; 
 
      text-align: center; 
 
      padding:0; 
 
      margin-top: 0px; 
 
      display:flex; 
 
     flex-direction:row; 
 
     justify-content: space-around; 
 

 
     } 
 

 
     .nav a { 
 
      display: block; 
 
     } 
 
     .nav li li{ 
 
      width: 70px; 
 
      height: 30px; 
 
      display: inline-block; 
 
      font-size: 15px; 
 
      background-color: #FFFFFF; 
 
      padding-left: 0; 
 
      text-align: left; 
 
      margin-left: 10px; 
 
      } 
 

 
     .nav li { 
 
      margin-left:10px; 
 
      display: inline-block; 
 
      float: left; 
 
      margin-left: 1px; 
 
      text-align: center; 
 

 
     } 
 
     .nav li ul { 
 
      position: absolute; 
 
      display: none; 
 
      width: inherit; 
 
     } 
 

 
     .nav li:hover ul { 
 
      display: block; 
 
     }

<body style="background:#F0F0F0"> 
 
    <div class="nav" > 
 
    <ul> 
 
    <li class="test"><element>&#9917 </element> </li> 
 
    
 
    <li><a href="#" class="navItem"> Home </a></li> 
 
    <li><a href="#" class="navItem"> Mail </a></li> 
 
    <li><a href="#" class="navItem"> Team </a></li> 
 
    <li><a href="#" class="navItem"> Matches </a></li> 
 
    <li><a href="#" class="navItem"> Club </a></li> 
 
    <li><a href="#" class="navItem"> Multimedia </a></li> 
 
    <li><a href="#" class="navItem"> Fans </a></li> 
 
    <li><a href="#" class="navItem"> Shop </a><li> 
 
    <li><a href="#" class="navItem"> More </a> 
 
     <ul> 
 
     <li><a href="#">Messenger</a></li> 
 
     <li><a href="#">Games</a></li> 
 
     <li><a href="#">Facebook</a></li>   
 
     </ul> 
 
     </li> 
 
     
 
    </ul> 
 
    </div>

kaynak

2016-03-26 19:40:16 DanyCode

net değil sen flexbox'a ile bunu yapabilir "SINIF"

kullanmak Tüm liste öğelerinin aynı genişlikte olmasını veya aralarındaki boşlukların aynı olmasını istiyorsanız ... aynı şey değildir.

Uzay

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0px; padding: 0; } .nav { background-color: #660099; color: white; height: 20px; margin-top: 50px; text-align: center; } .nav ul { list-style: none; text-align: center; padding: 0; display: flex; justify-content: space-between; } .nav a { display: block; color: white; text-decoration: none; background: darkorange; } .nav li { height: 50px; text-align: center; }

<body style="background:#F0F0F0"> <div class="nav"> <ul> <li><a href="#" class="navItem"> Logo </a> </li> <li><a href="#" class="navItem"> Home </a> </li> <li><a href="#" class="navItem"> Mail </a> </li> <li><a href="#" class="navItem"> Team </a> </li> <li><a href="#" class="navItem"> Matches </a> </li> <li><a href="#" class="navItem"> Club </a> </li> <li><a href="#" class="navItem"> Multimedia </a> </li> <li><a href="#" class="navItem"> Fans </a> </li> <li><a href="#" class="navItem"> Shop </a> </li> <li><a href="#" class="navItem"> More </a> </li> </ul> </div>

arasında

Hepsi aynı boyutu:

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0px; 
 
    padding: 0; 
 
} 
 
.nav { 
 
    background-color: #660099; 
 
    color: white; 
 
    margin-top: 50px; 
 
    text-align: center; 
 
} 
 
.nav ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding: 0; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.nav a { 
 
    display: block; 
 
    color: white; 
 
    height: 20px; 
 
    text-decoration: none; 
 
    background: darkorange; 
 
} 
 
.nav li { 
 
    text-align: center; 
 
    flex: 1; 
 
    border: 1px solid red; 
 
}

<body style="background:#F0F0F0"> 
 
    <div class="nav"> 
 
    <ul> 
 

 

 
     <li><a href="#" class="navItem"> Logo </a> 
 
     </li> 
 

 
     <li><a href="#" class="navItem"> Home </a> 
 
     </li> 
 
     <li><a href="#" class="navItem"> Mail </a> 
 
     </li> 
 
     <li><a href="#" class="navItem"> Team </a> 
 
     </li> 
 
     <li><a href="#" class="navItem"> Matches </a> 
 
     </li> 
 
     <li><a href="#" class="navItem"> Club </a> 
 
     </li> 
 
     <li><a href="#" class="navItem"> Multimedia </a> 
 
     </li> 
 
     <li><a href="#" class="navItem"> Fans </a> 
 
     </li> 
 
     <li><a href="#" class="navItem"> Shop </a> 
 
     </li> 
 
     <li><a href="#" class="navItem"> More </a> 
 
     </li> 
 
    </ul> 
 
    </div>

kaynak

2016-03-26 19:41:39

Bir menüdeki elemanlar arasındaki eşdeğer mesafe css

cevap

İlgili konular