简体   繁体   中英

Plus sign in a UL bullet list?

I need to have a bullet list to generate some tabs in a page. This is the page I'm currently working on:

http://citydev.pipehosting.it/francia-en-it/parigi-it/torre-eiffel.html

I need to write "+Info" in one of the tabs - which are all <li> elements - but it's shown as "Info+" instead... (as seen when visiting the link).

My HTML for the list:

<ul class="tabs"> 
    <li class="current"><strong>Prodotto</strong></li> 
    <li>Cosa include</li>
    <li>In evidenza</li> 
    <li>Come funziona</li> 
    <li>Consegna</li>
    <li>+Info</li> 
    <li>Video</li> 
</ul>

You may try something like this:

ul li:before { 
    content: "+"; 
    position: absolute; 
    left: -5px;
}
ul li { 
    text-indent: -5px; 
}

Check list style types on W3C for more info.

Sample DEMO

This is because the direction of the text in the tab list is set to right to left . To fix modify the css to override this declaration to left to right :

.tabs li {
    direction: ltr;
}

or remove direction: rtl; from where it is set on ul.tabs .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM