0

How to place list in single line?

https://code.sololearn.com/W1HaS4t2fu9Z/?ref=app How can I place the list so that it comes in single line?

31st Mar 2020, 6:30 PM
Souptik Nath
Souptik Nath - avatar
12 Antworten
+ 3
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>
1st Apr 2020, 3:43 AM
visph
visph - avatar
+ 2
Hey! You add in your css this:- li{ float:left; margin-left:18px; }
1st Apr 2020, 3:04 PM
SAN
SAN - avatar
+ 2
Fill in the blanks to change the list items to act as inline elements.li
14th May 2023, 5:01 PM
Qadir Bakhsh Rahim
Qadir Bakhsh Rahim - avatar
+ 1
visph seeing u after a long time sir 😊😊
1st Apr 2020, 5:54 AM
Prashanth Kumar
Prashanth Kumar - avatar
0
Geek not working
31st Mar 2020, 6:35 PM
Souptik Nath
Souptik Nath - avatar
0
When I open this from tablet it works but when I open from mobile it comes in next line
31st Mar 2020, 6:36 PM
Souptik Nath
Souptik Nath - avatar
0
No the list in which the home,service are there those list elements
31st Mar 2020, 6:39 PM
Souptik Nath
Souptik Nath - avatar
0
ul{ display: flex; } Search "horizontal list" here in Sololearn for different solutions.
31st Mar 2020, 6:46 PM
Kevin ★
0
visph But what was wrong in my code?
1st Apr 2020, 8:13 AM
Souptik Nath
Souptik Nath - avatar
0
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;
1st Apr 2020, 8:30 AM
visph
visph - avatar
0
Hey! You add in your css this:- li{ float:left; margin-left:18px; }
1st Apr 2020, 3:04 PM
SAN
SAN - avatar
0
li{ display:inline; }
8th Jan 2024, 5:28 AM
Nadhiya C