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="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="#">link 4</a> <a href="#">link 5</a> <a href="#">link 6</a> <a href="#">link 7</a> <a href="#">link 8</a> <a href="#">link 9</a> <a href="#">link 10</a> <a href="#">link 11</a> <a href="#">link 12</a> <a href="#">link 13</a> <a href="#">link 14</a> <a href="#">link 15</a> </div> </body>2 Answers
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="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> <a href="#">link 4</a> <a href="#">link 5</a> <a href="#">link 6</a> <a href="#">link 7</a> <a href="#">link 8</a> <a href="#">link 9</a> <a href="#">link 10</a> <a href="#">link 11</a> <a href="#">link 12</a> <a href="#">link 13</a> <a href="#">link 14</a> <a href="#">link 15</a> </div> </body> Try this
div { border: 1px solid #808080; max-height: 50px; overflow-y: scroll; width: 500px; } 
