SORU
8 EYLÜL 2008, PAZARTESİ


Ne kadar *gerçekten* HTML ve CSS yatay menü haklı mıyım?

HTML menü çubuğu üzerinde öğreticiler bir sürü bulabilirsiniz, ama IMHO genel olsa) bu özel durum için, herhangi bir iyi bir çözüm bulamadım:

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #
  • Sadece metin menü öğeleri farklı bir dizi var ve sayfa düzeni sıvıdır.
  • İlk menü öğesi sola hizalı, öğesini sağa hizalı olması gereken en son menü olmalıdır.
  • Kalan öğeleri menü çubuğunda en iyi şekilde yayılmış olmalıdır.
  • Numarasını önceden hesaplamak en uygun genişlikleri için şansı yok bu yüzden farklı.

Bir TABLO burada iyi gibi çalışmaz unutmayın

  • Eğer merkezi tüm TDs, ilk ve son madde aynı hizada değil.
  • -Hizala sola ve sağa Hizala ilk versiyonu. son öğeler, Aralık, sub-optimal olacaktır.

HTML ve CSS kullanarak temiz bir şekilde bunu uygulamak için belirgin bir yolu yoktur hayır tuhaf değil mi?

CEVAP
14 Mart 2010, Pazar


Yapacağımız en basit şey satır daha sol daha boş alanı işgal edecek satırın sonuna bir öğe eklemek ve sonra gizleyerek kırmaya etmektir. Bu oldukça kolay gibi: span basit bir element ile başardım

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>

  <span></span>
</div>

Beraberindeki CSS oldukça basittir:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

#menu span seçici içinde ıvır zıvır (bulduğum kadarıyla) çoğu tarayıcı memnun etmek için gerekli. Bir satır içi öğe display: inline-block kuralı nedeniyle kabul edilir beri bir satır sonu neden olur 100% span elemanın genişliği zorlaması. inline-block da yapar span Olası için blok seviyesinden stil kuralları gibi width neden olan unsur değil, uygun hattı ile menü ve bu menü için satır sonu.

Elbette span kullanmak durumunda genişliğini ayarlamak ve tasarım gerekiyor, ama genel bir fikir almak ve buna uyum sağlayabilir umarım.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • katherine gomez

    katherine go

    1 Aralık 2011
  • pain975

    pain975

    27 NİSAN 2008
  • RawBrahs

    RawBrahs

    28 Aralık 2010