How to put mutiple links in one line

Question

I want to display 7-9 html links in one line, but whenever I add another link, the last link goes down and forms another row. I want to put them in one line. like

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

Show an example of what you've tried and how you hoped it would look. — Always Learning, Apr 12 '15 at 19:21
By "links," I assumed you were referring to `a` tags, but now that you've posted your HTML, I see they are within `li` tags. Do you want only the sub-menus to be on one line? — Rick Hitchcock, Apr 12 '15 at 19:38
no the main menus the SEARCH link always goes down @RickHitchcock — Rajarshi Roy, Apr 12 '15 at 19:42

score 1 · Answer 1 · answered Apr 12 '15 at 20:01

1

Use these styles:

ul {
  white-space: nowrap;
}

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

.sub-menu li {
  display: block;
}

Fiddle

answered Apr 12 '15 at 20:01

Rick Hitchcock

35,202
5
48
79

score -1 · Answer 2 · answered Apr 12 '15 at 19:45

-1

In the list that you put them in make a class and then in css add to the class: display:inline; example: 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>

answered Apr 12 '15 at 19:45

Josh H

19
1
7

2

This is not valid html, because an ul tag may only contain li tags – JoJo Apr 12 '15 at 19:48
Not only that: the links will also wrap into another row when there are too many of them. – Sebastian Simon Apr 12 '15 at 20:02
@josh H your method worked though the drop down list disappeared – Rajarshi Roy Apr 12 '15 at 20:07

How to put mutiple links in one line

2 Answers2