html - li:after in horizontal navigation bar keeps putting its content on a new line -


I have some stupid CSS problem, the way I want it to be I am working. The problem is that it somehow keeps an arrow under anchor text.

This is an example html:

  & lt; Ul id = "navi" & gt; & Lt; Li & gt; & Lt; A href = "" & gt; ABC & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; DEFT & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Too & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;   

More stylesheet:

  #navi {list-style: none; Padding: 0.5 AM; } #NV Li {Float: left; Display: Inline; List-style-type: none; } #New Lee A {display: block; Font weight: normal; Font size: 13px; Color: # 222; Padding: 0.2 m 1em; Text-decoration: None; } # NVI li A: Hover, # NVI li A: Active {background: # 5ea0ff; White color; Text-decoration: None; } #navi li a.selected {background: # 444; White color; Text-decoration: None; } # Navi li: after {content: "\ 25B6"; } # Navi li: Previous Type: {After Content: ""; }   

It looks like this:

I want an arrow right after anchor, but I can not use it: After (which works well, But with net anchor text)

thanks

This is due to the fact That element is seen after the arrow, the anchor tag, display: block - is a property that will push the content later by itself, in a new line. If changing a bit will not be a problem, then you can change this style like this:

  # navi li {display: inline-block; }   

Which arrow allows to display on the same line here is one to display here Hope this will help! I know if you have any questions.

Edit: Alternatively, you can apply a float for the anchor tag. For example:

  # navi li a {float: left; }   

This lets you keep block display, but also allows arrows to be displayed on the same line.

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -