兩行橫向導航菜單

-2

想知道是否有更簡單的方法來完成此操作。這裏是我的困境，我有8個類別，每條線都需要4個，他們必須左對齊上面的類別，以便它們都正確流動。我的第一個想法是創建4個ul，每個2ul，並用inline-block顯示我的ul。但我想知道是否會更容易使用CSS表。任何建議？兩行橫向導航菜單

下面是代碼

  <ul id="nav-one" class="products-header"> 
       <li><a>Lasers/Inkjet Sheet Labels</a></li> 
       <li><a>Thermal Labels &amp; Ribbon</a></li> 
      </ul> 
      <ul id="nav-one" class="products-header"> 
       <li><a>Mailing Tabs &amp; Seals</a></li> 
       <li><a>Contionous Pressure Sensitive Labels</a></li> 
      </ul> 
      <ul id="nav-one" class="products-header"> 
       <li><a>Tray &amp; Bag Tags</a></li> 
       <li><a>Heat Seal Label Paper</a></li> 
      </ul> 
      <ul id="nav-one" class="products-header"> 
       <li><a>Repositionable Postal Notes</a></li> 
       <li><a>Paper Labels</a></li> 
      </ul>

CSS

.footer-products, 
.products-header { 
    display: inline-block; 
}

來源

2015-11-19 Matthew Jakachira

小心與我們分享您的代碼？否則給你的建議不太可能 – AGE

css表？表格是一個html元素！你也知道，ul也可以水平列出！最後但並非最不重要的是google上有很多關於你想實現什麼的例子 –

這個問題要麼過於寬泛，要麼基於意見**，或者邀請討論，所以是堆棧溢出的主題。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

在每個HTML頁面中，您只能有一個ID。所以你們的所有人都不可能擁有導航功能。不過，您可以將其添加爲類。如：

<ul class="nav-one products-header"> 
    <li><a>Lasers/Inkjet Sheet Labels</a></li> 
    <li><a>Thermal Labels &amp; Ribbon</a></li> 
</ul>

但我會以不同的方式解決它。我不知道，如果你的意思是，你想有他們在兩排，如：

1 2 3 4 
5 6 7 8

或者在兩列：

我會假設，你希望他們爲列。

這裏是我會做什麼：

HTML

<div class="container"> 
<ul class="nav-ul"> 
    <li class="newline"><a>Lasers/Inkjet Sheet Labels</a></li> 
    <li><a>Thermal Labels &amp; Ribbon</a></li> 
    <li class="newline"><a>Mailing Tabs &amp; Seals</a></li> 
    <li><a>Contionous Pressure Sensitive Labels</a></li> 
    <li class="newline"><a>Tray &amp; Bag Tags</a></li> 
    <li><a>Heat Seal Label Paper</a></li> 
    <li class="newline"><a>Repositionable Postal Notes</a></li> 
    <li><a>Paper Labels</a></li> 
</ul> 
</div><!-- container -->

CSS

.container {width: 100%; display: block; overflow: hidden;} 
.nav-ul {list-style: none; margin: 0; padding: 0;} 
.nav-ul li {float: left; margin: 0; padding: 0; width: 50%;} 
.nav-ul .newline {clear: both; }

此代碼沒有經過測試

來源

2015-11-19 18:02:08 Zeth

兩行橫向導航菜單

回答

相關問題