Mohammad Ghazi Istanboli Mohammad Ghazi Istanboli - 2 months ago 7
HTML Question

How to display links inline in a div without spanning another row?

Hello guys am trying to make a couple of links inside a div to be displayed in a row so if the number of links exceeded the div width then a scrollbar can be used to navigate between the links but the problem is that the links never exceed the div width they always span a new row , I tried to use float and different display modes but doesn't work.

here is my code



div {
width: 500px;
border: 1px solid gray;
overflow-x: scroll;
max-height: 50px;
}
div a.links {
display: inline-block;
background: lightgreen;
height: 50px;
}

<body>
<div>
<a href="#" class="links">link 1</a>
<a href="#" class="links">link 2</a>
<a href="#" class="links">link 3</a>
<a href="#" class="links">link 4</a>
<a href="#" class="links">link 5</a>
<a href="#" class="links">link 6</a>
<a href="#" class="links">link 7</a>
<a href="#" class="links">link 8</a>
<a href="#" class="links">link 9</a>
<a href="#" class="links">link 10</a>
<a href="#" class="links">link 11</a>
<a href="#" class="links">link 12</a>
<a href="#" class="links">link 13</a>
<a href="#" class="links">link 14</a>
<a href="#" class="links">link 15</a>
</div>

</body>




Answer

One possible solution is to add (white-space: nowrap;) to your parent div.

Sample Code:

div{
  width:500px;
  border: 1px solid gray;
  overflow-x: scroll;
  max-height: 50px;
  white-space: nowrap;
}

div a.links{
  display: inline-block;
  background: lightgreen;
  height: 50px;
}
<body>
  <div>
    <a href="#" class="links">link 1</a>
    <a href="#" class="links">link 2</a>
    <a href="#" class="links">link 3</a>
    <a href="#" class="links">link 4</a>
    <a href="#" class="links">link 5</a>    
    <a href="#" class="links">link 6</a>
    <a href="#" class="links">link 7</a>
    <a href="#" class="links">link 8</a>
    <a href="#" class="links">link 9</a>
    <a href="#" class="links">link 10</a>
    <a href="#" class="links">link 11</a>
    <a href="#" class="links">link 12</a>
    <a href="#" class="links">link 13</a>
    <a href="#" class="links">link 14</a>
    <a href="#" class="links">link 15</a>
  </div>
</body>