November 11, 201312 yr Hello I am trying to create a horizontal navation bar via htm/css. I can do it fine without any problems however the problem arises when trying to change the gap between the text. For example if I have links such as Home Buy About etc I want to be able to change (widen or narrown) the gap between the text. I've been trying to work it out for a few hours and I'm not getting very far. I only want to do it using html or css. Any help would be much appreciated. Here is the basic code I am working with for testing purposes: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } li { display:inline; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> Edited November 11, 201312 yr by teodora wrapped your code. Please use <> icon :)
November 11, 201312 yr You can add paddings to your list elements, like this: li { display:inline; padding-left:1em; /*adjust to suit*/ padding-right:1em; /*adjust to suit*/ }
Create an account or sign in to comment