Question

我想在一行中显示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>

Answer 1

使用以下样式：

ul {
  white-space: nowrap;
}

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

.sub-menu li {
  display: block;
}

Fiddle

Answer 2

使用类似

的表格

<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>...

Answer 3

在你把它们放入一个类的列表中然后在css中添加到类：display：inline; 例如：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>

如何将多个链接放在一行中

3 个答案: