如何將多個鏈接放在同一行中

我想要在一行中顯示7-9個html鏈接，但每當添加另一個鏈接時，最後一個鏈接都會關閉並形成另一行。我想把它們放在一行中。像如何將多個鏈接放在同一行中

<link1> <link2><link3><link4><link5><link6><link7> 

<li><a href="adminpanel.jsp">HOME</a> 
         <li><a href="Checkin.jsp">Check In</a></li> 
         <li><a href="">Check Out</a></li> 
         <li><a href="#">Re-Issue</a></li> 
         <li><!--movies er drop down--> 
          <a href="#">Student<span class="arrow">&#9660;</span></a> 

          <ul class="sub-menu"> 
           <li><a href="#">Approve</a></li> 
           <li><a href="#">Fine</a></li> 
           <li><a href="#">Check List</a></li> 
           <li><a href="#">Department</a></li> 
          </ul> 
         </li> 

         <li><a href="#">Faculty<span class="arrow">&#9660;</span></a> 
          <ul class="sub-menu"> 
           <li><a href="#">Books issued</a></li> 
           <li><a href="#">Search</a></li> 

          </ul> 
         </li> 

         <li> <a href="#">SEARCH<span class="arrow">&#9660;</span></a> 

          <ul class="sub-menu"> 
           <li><a href="#">Student</a></li> 
           <li><a href="#">Faculty</a></li> 
           <li><a href="#">Books</a></li> 
           <li><a href="#">History</a></li> 
          </ul>

來源

2015-04-12 Rajarshi Roy

顯示你已經試過什麼一個例子，你如何希望它看起來。 –

'white-space：nowrap' –

@RickHitchcock我應該在哪裏放？ –

-1

使用表像

<table> 
<tr> 
<td>link1</td> 
<td>link2</td> 
<td>link3</td> 
<td>link4</td> 
<td>link5</td> 
<td>link6</td> 
<td>link7</td> 
     ..... 
</tr> 
</table>...

來源

2015-04-12 19:44:47 toles04

表不應再用於設置網頁的樣式。表唯一的用途應該是代表數據 – DarkBee

是這些任何類型的CSS，我可以添加到對齊鏈接在一行？ –

-1

在你把他們在做一個類列表，然後在CSS添加到類：顯示：內聯; 例如：http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/

<ul class="links"> 
    <a href="google.com">Google</a> 
    <a href="google.com">Google1</a> 
    <a href="google.com">Google2</a> 
    <a href="google.com">Google3</a> 
</ul>

來源

2015-04-12 19:45:59

這不是有效的html，因爲ul標籤可能只包含li標籤 – JoJo

不僅如此：當鏈接太多時，鏈接也會換行。 – Xufox

@josh H儘管下拉列表消失，但您的方法仍然有效 –

使用這些樣式：

ul { 
    white-space: nowrap; 
} 

li { 
    vertical-align: top; 
    display: inline-block; 
    padding: 0em 0.5em; 
} 

.sub-menu li { 
    display: block; 
}

Fiddle

來源

2015-04-12 20:01:33

如何將多個鏈接放在同一行中

回答

相關問題