<li>不同的高度 [英] Different height for the <li>
本文介绍了<li>不同的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
目标：
使文本bbb具有与aaa相同的字体高度，但li.ttt的高度应与font-size具有相同的高度：xx-large ;
Goal:
Make the text "bbb" to have the same font height as "aaa" but the height of the li.ttt should have the same height as the font-size: xx-large;
问题：
不知道该怎么做。我尝试使用高度，但它不工作。
Problem:
Don't know how to do it. I tried using "height" but it doesn't work.
https://jsfiddle.net/qc89dwz7/
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
<a href="">bbb</a>
</li>
</ul>
</div>
推荐答案
xx-large 翻译为 32px
知道这一点，您可以分别建立两个列表项的高度和行高：
Knowing this, you can establish the height and line-height of the two list-items separately:
li.filtered {
height: 12px;
line-height: 12px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
然后，您可以建立 aaa 和 bbb 为 12px ：
You can then establish the font-size of aaa and bbb as 12px:
li.filtered a,
li.ttt a {
font-size: 12px;
}
将它们放在一起：
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
background-color: rgba(244,244,244,1);
}
li.filtered {
height: 12px;
line-height: 12px;
margin: 10px;
}
#result-filters li.filtered {
margin-top: 10px;
}
li.ttt {
height: 32px;
line-height: 32px;
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
<a href="">bbb</a>
</li>
</ul>
</div>
简单的替代颜色背景
在纯色背景 下方两个相同字体大小的列表项 ， code>并留下 li.filtered 的背景：transparent：
If you wish to middle-align the two same-font-size list-items over a plain colour background, simply colour in the background of li.ttt and leave the background of li.filtered transparent:
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
将它们放在一起（更简单的版本）：
LI.filtered A {
position: relative;
padding: 1px 20px 1px 4px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll right 0;
background-position: right bottom;
font-weight: 400;
color: #08C;
text-decoration: none;
}
LI.filtered .testt {
background: #F0F0FF;
padding: 1px 4px 1px 4px;
font-weight: 400;
color: #08C;
text-decoration: none;
}
#result-filters {
margin: 0, 0, -30px;
}
#result-filters UL {
display: inline;
list-style: outside none none;
margin: 0;
padding: 0;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
}
LI.filtered,
#result-filters LI.filtered {
padding-left: 0;
background: transparent none repeat scroll 0 0;
}
#result-filters UL LI {
margin: 0 8px 0 0;
float: left;
}
LI.ttt A {
position: relative;
padding: 1px 4px 1px 20px;
background: #F0F0FF url(https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Lollipop-16.png) no-repeat scroll left 0;
background-position: left;
font-weight: 400;
color: #08C;
text-decoration: none;
font-size: xx-large;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #F4F4F4;
min-height: 61px;
border: 0;
line-height: 1.2;
letter-spacing: 1px;
width: 137px;
text-align: center;
font-family: Tahoma;
}
li.filtered,
li.ttt {
display:block;
height: 32px;
line-height: 32px;
}
li.ttt {
background-color: rgba(244,244,244,1);
}
li.filtered a,
li.ttt a {
font-size: 12px;
}
<div id="result-filters">
<ul>
<li class="filtered">
<a href="">
aaa
</a>
</li>
<li class="ttt">
<a href="">bbb</a>
</li>
</ul>
</div>
这篇关于<li>不同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
