How to place list in single line?

Question

https://code.sololearn.com/W1HaS4t2fu9Z/?ref=app

How can I place the list so that it comes in single line?

Answer 1

you first list of <li></li> (enclosed in a <ul></ul>) has already the css property 'display' set to 'inline', and if your device/window have enough width they will fit in one line (but as a paragraphe it could be introduced some automatic break lines, and if the width in tiiny, maybe only one element by line)

your second list of <li></li> (not enclosed by a <ul></ul> wich is bad practice) doesn't inherit the 'display:inline' css rule (wich target all <li> childs of element with id 'nav', what's not the case of the second list).

To inline the second list set 'display:inline' with just the li selector:
li { display:none; }

To get more width available for the first list set:
ul { margin:0; }
... to avoid the default left margin

If you want the first list vertical, you must remove the 'inline' rule from the selector '#nav li', and better target the rule to inline only the second list and avoid applying the rule to the first list (enclose it in a specific id or class, or set the same class to each of your <li>

Answer 2

Hey!
You add in your css this:-

li{
float:left;
margin-left:18px;
}

Answer 3

Fill in the blanks to change the list items to act as inline elements.li

Answer 4

visph
seeing u after a long time sir 😊😊

Answer 5

Geek not working

Answer 6

When I open this from tablet it works but when I open from mobile it comes in next line

Answer 7

No the list in which the home,service are there those list elements

Answer 8

ul{
display: flex;
}
Search "horizontal list" here in Sololearn for different solutions.

Answer 9

visph But what was wrong in my code?

Answer 10

If the li items doen't have enough width to fit on same line, they come to next line.

You could force them to not wrap (go to new line), but you should choose how handling the missing width: visible (overflow the container and enlarge the viewport (body), introducing horizontal scrollbar, wich isn't wished most of the time), hidden (but you lose the part of the line owerflowing), or auto (wich introduce also scrollbar, but in the container, as a window in the window) for the css property 'overflow'...

Try adding this to the ul css rules:

overflow:auto;
white-space:nowrap;

Answer 11

Hey!
You add in your css this:-

li{
float:left;
margin-left:18px;
}

Answer 12

li{
display:inline;
}