Satır içi blok görüntü hizalanamıyor ve nav düğmeleri

Question

Herhangi bir nedenle ya da başka bir şekilde gezinme düğmelerim görüntü tarafından aşağı doğru itiliyor. Bu sorunu resme katarak çözebilirim ama bu beni ilgilendirmiyor.

CSS:

.wrapped { 
position: relative; 
width: 70%; 
margin: 0 auto; 
} 

.header { 
width: 70%; 
margin: 0 auto; 
} 

.headernav { 
width: 70%; 
margin: 0 auto; 
height: 120px; 
} 

.logo, .logo img { 
display: inline-block; 
margin-right: 30px; 
} 

.nav { 
padding-left: 30px; 
display: inline-block; 
height: 120px; 
line-height: 120px; 
vertical-align: middle; 
} 

.navbutton { 
padding: 5px 30px; 
display: inline-block; 
} 

#fitness, #wcontrol, #recipes, #supplementation { 
text-align: center; 
height: 36px; 
line-height: 36px; 
font-weight: bold; 
} 

HTML:

<div id="wrapperheader"> 
    <div class="headernav"> 

    <div class="logo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div> 

    <div class="nav"> 
     <div class="navbutton"><div id="recipes">Recipes</div></div> 

     <div class="navbutton"><div id="fitness">Fitness</div></div> 

     <div class="navbutton"><div id="wcontrol">Weight Control</div></div> 

     <div class="navbutton"><div id="supplementation">Supplementation</div></div> 
    </div> 

    </div> 
</div> 

bu veya basit çözümün neden oluyor herkes biliyor, lütfen bana bildirin. Üzgün ​​bir cevabı varsa özür dilerim .. Bir gün için kodlara bakıp açıldım ve sadece tıklamıyor. Eğer .wrapped kabın width: 70% tutmak istiyorsa

Answer 1

Sen nav çubuğuna logosunu taşıyarak, div çorba kaldırmak için HTML & CSS basitleştirebiliris Kullanıcı ana sayfaya. Böylece bir nav elemanı haline gelir.

HTML:

<div class="nav"> 
    <div class="navlogo"><a href="http://protein.guru" class="navlogo-link"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></a></div> 
    <div class="navbutton"><span id="recipes">Recipes</span></div> 
    <div class="navbutton"><span id="fitness">Fitness</span></div> 
    <div class="navbutton"><span id="wcontrol">Weight Control</span></div> 
    <div class="navbutton"><span id="supplementation">Supplementation</span></div> 
</div> 

HTML yukarıdaki açıklıklı kullanır, ancak aşağıda gösterildiği gibi aynı zamanda, <... class="navbutton" id="recipes">Recipes</...> kullanabilirsiniz.

Optimize HTML: Genellikle insanlar, nav çubukları için UL LI etiket yığınları oluşturur.

<ul class="nav"> 
    <li class="navlogo"><a href="http://protein.guru" class="navlogo-link"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></a></li> 
    <li class="navbutton" id="recipes">Recipes</li> 
    <li class="navbutton" id="fitness">Fitness</li> 
    <li class="navbutton" id="wcontrol">Weight Control</li> 
    <li class="navbutton" id="supplementation">Supplementation</li> 
</ul> 

Sonra hem .logo & .logo .img etiketlerine sağ kenar boşlukları & padding çoğaltmak uygulamada yaşadığı sorunlar kaldırır, CSS temizliyor. Örneğinizde, nav öğesinde soldaki kenar boşluğu da var; bu, 1. bağlantıda & logosu arasında ekstra boşluk alanı oluşturuyordu.

Aşağıdaki CSS örneğinde, ayrıca vertical-align:middle; özelliğinde atılmıştır, böylece nav bağlantılar daha büyük bir resim logosunun yanında dikey olarak ortalanır. Bu jsfiddle'a bakın.

CSS:

.nav { 
    height: 120px; 
    line-height: 120px; 
    margin: 0 auto; 
    vertical-align: middle; 
    width: 70%; 
    } 

    .nav li { 
    display: inline-block; 
    list-style-type: none; /* removes bullets */ 
    } 

    .nav .logo, 
    .nav .navlogo, 
    .nav .navbutton { 
    display: inline-block; 
    } 

    .nav .logo { 
    vertical-align: middle; 
    } 

    .nav .navbutton { 
    font-weight: bold; 
    height: 36px; 
    line-height: 36px; 
    padding: 5px 0 0 30px; 
    text-align: center; 
    } 

Answer 2

, kendi nav menü ve resminizin boyutu padding azaltmak zorundayız.

See this fiddle

Otherelse (Pencerenin büyük boyutuna çalışır), sen .wrapped kabın sabit width koymak ama yine görüntünün sizin nav menünün padding ve width düşünmek zorundayız yapabilirsiniz uyması için. Üzerine tıklayarak dönecektir böylece

Genellikle logosu bir çapa etiketi ile sarılmış olacaktır:

.navbutton { 
    padding: 5px 25px; 
    display: inline-block; 
}