变迁李高度移动父高度

Question

这里是jsfiddle

的例子的问题是，改变有源标签的高度时，它向下生长，留下底部边界和非选择接片之间的空间。有没有办法让它向上生长？或者以其他方式解决这个问题？

$('li').on('click', function() { 
 
    $('li').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

ul { 
 
    display: block; 
 
    border-bottom: 1px solid #444; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
    background: #888; 
 
} 
 

 
.active { 
 
    background: #bbb; 
 
    height: 36px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>Tab 1</li> 
 
    <li>Tab 2</li> 
 
    <li>Tab 3</li> 
 
</ul>

Answer 1

使用vertical-align: bottom;这样的：

li { 
    display: inline-block; 
    padding: 0 20px; 
    background: #888; 
    height: 30px; 
    vertical-align: bottom; 
} 

Answer 2

您可以添加到vertical-align:bottom;贵丽，然后当它调整它的大小不断底部的文本。

重新考虑你如何做到这一点可能是值得的，只是在顶部有一个边框或填充改变颜色，所以整个标签和内容不会在点击时移动。

Answer 3

代替改变高度，改变边界顶像这个 -

.active 
{ 
    background: #bbb; 
    border-top: 8px #bbb solid; 
} 

Answer 4

我添加的6个像素一个预设保证金锂元素的顶部。当所选元素处于活动状态时，它将删除边距，以便在留在同一位置时可以增加高度。

试试看：

$('li').on('click', function() { 
 
    $('li').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

ul { 
 
    display: block; 
 
    border-bottom: 1px solid #444; 
 
    padding: 0; 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
    background: #888; 
 
    height: 30px; 
 
    vertical-align: bottom; 
 
    margin-top: 6px; 
 
} 
 
.active { 
 
    margin-top: 0; 
 
    background: #bbb; 
 
    height: 36px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Tab 1</li> 
 
    <li>Tab 2</li> 
 
    <li>Tab 3</li> 
 
</ul>

Answer 5

Updated fiddle

只是增加padding到active类做的工作：

.active 
{ 
    background: #bbb; 
    height: 40px; 
    padding-top:20px; 
} 

希望这有助于

Answer 6

它是正常的行为。检查我的解决方案

http://jsfiddle.net/chv6403m/9/

<ul> 
    <li><span>Tab 1</span></li> 
    <li><span>Tab 2</span></li> 
    <li><span>Tab 3</span></li> 
</ul> 


ul 
{ 
    display: block; 
    border-bottom: 1px solid #444; 
    padding: 0; 
    height: 30px; 
} 

li 
{ 
    position: relative; 
    vertical-align: top; 
    display: inline-block; 
    height: 30px; 
} 

li span 
{ 
    vertical-align: top; 
    display: block; 
    padding: 0 20px; 
    background: #888; 
    height: 30px; 
} 
.active span 
{ 
    position: absolute; 
    top: 0; 
    background: #bbb; 
    height: 36px; 
}