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
Post a Comment