使文本完全包含在引导下拉菜单中

Question

我有一个bootstrap下拉按钮，这个下拉列表包含许多具有不同字体大小的元素：

<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>

但是下拉菜单看起来很难看，文本没有完全包含在它的容器中，我试图改变每个容器的高度而且没有用完。

我该如何解决这个问题？

编辑：

它的外观如下：

Answer 1

我认为问题是<li>元素的高度。尝试将其高度设置为至少与font-size相同，并为边距添加一些像素...例如：
<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> ...等

Answer 2

尝试在li元素上设置css填充，如填充：3px 0px;或者你需要为每个li元素设置另一个带有css的行高。

尝试在li元素中设置字体大小，而不是在标记

中