CODEWITHSUNDEEP
csstwitter-bootstrap
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2084

make text fully contained in a bootstrap dropdown menu

I have a bootstrap dropdown button, and this drop down ontains many elements that has differente font-sizes :

<ul id="tailles" class="dropdown-menu">
  <li><a style="font-size: 8px;">Petite (8px)</a></li>
  <li><a style="font-size: 10px;">Petite (10px)</a></li>
  <li><a style="font-size: 12px;">Petite (12px)</a></li>
  <li><a style="font-size: 14px;">Normale (14px)</a></li>
  <li><a style="font-size: 18px;">Grande (18px)</a></li>
  <li><a style="font-size: 24px;">Grande (24px)</a></li>
  <li><a style="font-size: 36px;">Grande (36px)</a></li>
</ul>

but the dropdown-menu looks ugly, the text isn't fully contained in it's container, I tried to change the height for each and it didn't worked out.

How can I solve this ?

Edit :

This is how it looks :

enter image description here

Upvotes: 0

Views: 64

Answers (2)

webdev-dan
webdev-dan

Reputation: 1359

I think the problem is the height of the <li> element. Try setting its' height to at least the same as font-size and add some pixels for margin ...for example:
<li style="height:22px"><a style="font-size: 18px;">Grande (18px)</a></li>
<li style="height:24px"><a style="font-size: 20px;">Grande (20px)</a></li> ...etc

Upvotes: 1

Florian Brinker
Florian Brinker

Reputation: 735

Try setting a css padding on the li element, like padding: 3px 0px; or you need to set another line-height with css for each li element.

And try setting the font size in the li element, not in the a tag

Upvotes: 0

Related Questions