CODEWITHSUNDEEP
htmlwordpresscss
Phillip Mclauren
Phillip Mclauren

Reputation: 417

CSS styling WordPress widget

I am showing language translation flags on my Wordpress website:

Below is the code

<ul>
<li id="qtranslate-8" class="widget-container widget_qtranslate">
<ul class="qtrans_language_chooser" id="qtranslate-8-chooser">
<li class="lang-en active">    
<a href="http://www.fadomi.org/" hreflang="en" title="English" class="qtrans_flag qtrans_flag_en"><span style="display:none">English</span></a>
</li>
<li class="lang-fr">
<a href="http://www.fadomi.org/fr/" hreflang="fr" title="Français" class="qtrans_flag qtrans_flag_fr"><span style="display:none">Français</span></a></li>
<li class="lang-zh">
<a href="http://www.fadomi.org/zh/" hreflang="zh" title="中文" class="qtrans_flag qtrans_flag_zh"><span style="display:none">中文</span></a>
</li>
</ul>
<div class="qtrans_widget_end"></div>
</li>
</ul>

This is showing me a list with bullets..as you can see on fadomi.org, I want to remove these bullets and show all these flags horizontally, Can anyone help me?

Upvotes: 0

Views: 824

Answers (3)

Dipak
Dipak

Reputation: 12190

Write this in CSS - 

ul{
  list-style-type: none;
}
ul li{
  float: left; 
}

Working Demo

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

Add ul {list-style:none} in your css.

You have

ul {
list-style: square;
margin: 0px 0px 18px 1.5em;
}

Remove square and add none.

Upvotes: 2

Simone
Simone

Reputation: 21262

To remove bullets from an unordered list:

ul { list-style-type: none; }

You may also want to reset the left margin:

ul { margin-left: 0; }

Then you can float list elements to show them horizontally:

ul li { float: left; }

And finally, clear the float:

ul { clear: left; }

Upvotes: 1

Related Questions