HTML文本導航欄

我在站點標題下有一個導航欄，但我希望將標題的開頭和結尾放在導航欄中的第一個和最後一個項目上。我沒有實時預覽，但我附上了一張圖片。我可以在一個瀏覽器中排列它，但是當我在另一個瀏覽器中打開它時，它會再次關閉。有沒有簡單的方法來排列文本，使其適用於所有內容？謝謝HTML文本導航欄

screenshot

HTML：

<body onload="play()"> 
    <div class="heading">UPRISING</div> 
    <div class="container_12"> 
     <div id="topnav" align="center"> 
     <ul id="list-nav"> 
      <li><a href="home.html">HOME</a></li> 
      <li><a href="about.html">ABOUT</a></li> 
      <li><a href="trailer.html">TRAILER</a></li> 
      <li><a href="stills.html">STILLS</a></li> 
      <li><a href="news.html">NEWS</a></li> 
      <li><a href="contact.html">CONTACT</a></li> 
      <!-- <li><a href="distribution.html">DISTRIBUTION</a></li> --> 
     </ul> 
     </div> 

<!-- START OF CONTAINER --> 

    <div class="trailer"> 
    <img id="imgHolder" />  
    </div> 
</div> <!-- END OF CONTAINER 12 -->

CSS：

#topnav li { 
    margin-right: 110px; 
} 

#topnav li:nth-last-child(1) { 
    margin-right: 0px; 
}

來源

2012-04-08 Eric Goncalves

您可以text-align: justify

工作見一個demo

來源

2012-04-08 17:45:05 roger

嘿，這似乎工作！好一個。比其他答案簡單。 – 2012-04-08 17:48:04

非常感謝你直接工作 – 2012-04-08 17:54:23

設置一個固定的寬度爲列表項。將第一個對齊到左邊和最後一個，中間的所有對齊應該是中心對齊的。這樣，你就不會放棄字體渲染器的擺佈。

更新與CSS：

#topnav li { 
    text-align: center; 
    width: Xpx; /* X is total width divided by number of list items */ 
} 
#topnav li:first-child { 
    text-align: left; 
} 
#topnav li:last-child { 
    text-align: right; 
}

來源

2012-04-08 17:27:26

我怎麼會去，如果你不介意我問 – 2012-04-08 17:34:59

見編輯回答。 – 2012-04-08 17:37:01

我試過了，它不會將它們中的任何一個向左或向右對齊 – 2012-04-08 17:42:06

這是一個樣的問題，這要求良好的舊錶。

<table id="list-nav"> 
    <tr> 
      <td><a href="home.html">HOME</a></td> 
      <td><a href="about.html">ABOUT</a></td> 
      <td><a href="trailer.html">TRAILER</a></td> 
      <td><a href="stills.html">STILLS</a></td> 
      <td><a href="news.html">NEWS</a></td> 
      <td><a href="contact.html">CONTACT</a></td>   
    </tr> 
</table>

寬度將均勻分佈問題解決。

或者......

#list-nav li:last-child { text-align: right; }

來源

2012-04-08 17:51:26 Starx

但表是邪惡的！ [或者他們？]（http://stackoverflow.com/questions/890850/table-for-layouts-is-evil-right） – 2012-04-08 17:53:34

@TonyR，不，桌子從來不是邪惡的。人們雖然他們是 – Starx 2012-04-08 17:55:20

今天人們仍然憤怒。儘管如此，你還是把桌子解決方案扔了。我自己無動於衷，但由於每個人都對此感到憤怒，我從不使用表格進行佈局。至少在我的經驗中，幾乎總是有一個體面的CSS解決方案。其他答案無論如何都被接受了，只有+1這個=） – 2012-04-08 17:57:17

HTML文本導航欄

回答

相關問題