Put links in one line | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

Put links in one line

Hi there I made a code with a div that has a few links but the problem is that the links all come up on different lines, ho w can I make it so that they all come in one line? (Its sort of a bar on the top of the page with links to all parts of the page (a nav bar))

13th Dec 2019, 5:45 AM
Eli
14 Answers
+ 1
can we see the code ? fyi <div> are block level element, you can change its display to inline using css to make it behave like <span>
13th Dec 2019, 5:52 AM
Taste
Taste - avatar
+ 1
Taste oh thanks but I figured it out cuz I had put each link in a seperate div so I took it out of div and now its on one line my only problem is now how can I put space between each link?
13th Dec 2019, 5:56 AM
Eli
+ 1
Taste so im guessing I can add a class to an <a> tag...... but can I design the text to make the links nice and not be purple after clicked?
13th Dec 2019, 5:59 AM
Eli
+ 1
Taste I mean design it as in make a nice font and color
13th Dec 2019, 6:05 AM
Eli
+ 1
yeah, just use css as usual. :visited will inherit property from its main ruleset. .aClass{ /*whats in here*/ font-familiy: serif; color: white; padding: 5px; background: #222; } .aClass:visited{ /*will also be applied here*/ /*you can also override what main ruleset had*/ color: lime; }
13th Dec 2019, 6:09 AM
Taste
Taste - avatar
+ 1
Taste sorry i dont get what yo mean by /*whats in here*/
13th Dec 2019, 6:11 AM
Eli
+ 1
oh yeah I knew it waas a comment just wondered if twas neccessary thanks for your time
13th Dec 2019, 6:13 AM
Eli
+ 1
thanks Joshua but can you help me make all links evenly devided on the nav bar? tried a padding but when I put it on one of the links it worked only when I cliked that link (thats when there was space between links) but when I clicked the other links it went back to being all together so I added a padding to the other ones but it got all messed up......
15th Dec 2019, 12:33 AM
Eli
0
simplest solution by adding margin for each link
13th Dec 2019, 5:57 AM
Taste
Taste - avatar
0
yes by using pseudo class :visited .aClass:visited{ color: blue }
13th Dec 2019, 6:01 AM
Taste
Taste - avatar
0
its a comment, it wont make any difference in the code. just an explaination from me.
13th Dec 2019, 6:12 AM
Taste
Taste - avatar
0
just add the following to your css: div a { display: inline-block; }
14th Dec 2019, 10:04 PM
Joshua
0
Taste, that will not solve the problem, you must set it to display inline or inline block.
14th Dec 2019, 10:09 PM
Joshua
0
try this: div a { display: inline-block; margin: auto; }
15th Dec 2019, 12:34 AM
Joshua