How can i align a <li> item horizontally.

Question

Just as in case of a <ol> and <ul> too.
Like = #Home #Blog #Contact, in the same line!
P. S. Suppose "#" as a bullet.

Answer 1

<!-- You could replace <ul> by <ol>, but that's less semantically meaningfull, as to display those kind of list horizontally (inlined), you often doesn't want to display bullets/indexes: -->

<ul class="inlinedList">
<li>item</li>
<li>another item</li>
<li>last item</li>
</ul>
<style>
.inlinedList {
padding:0; /* defaut list behaviour shift the content to the right */
list-type-type:none; /* disable bullets/indexes */
/* here just not mandatory visual style for the example */
background:silver;
text-align:center;
}
.inlinedList > li {
display:inline-block;
/* here you maybe want to style each list item to visually separate them ^^ */
background:dimgray;
color:white;
padding:0.5ex;
margin:0.25ex
}
</style>

Answer 2

Is it necessary to add list items in nav tag or i can use any other element like anchor tag without li tag in nav !?

Answer 3

👍😁😂 ok let see... And wait for someone genius.

Answer 4

I joined... 👍😊

Answer 5

Nice question

Answer 6

@kritesh ojha Do you know the answer?

Answer 7

It's not mandatory to use any tags, and you can use a <nav> to contain <a> without <ul><li>, but it's often used by this way, because it's semantically well suited for any list ;)

Answer 8

Thanks a lot @visph👍😊

Answer 9

nope