我怎样才能让我的垂直标签的内容框是动态的，他的高度和按钮一样长，或者更大是因为内容更多？这是算法 JSFIDDLE CLICK
html
<body>
<div id="wrapper">
<h1>Vertical Tabs</h1>
<!-- Text Example -->
<div class="verticalslider" id="textExample">
<ul class="verticalslider_tabs">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Praesent Pulvinar</a></li>
<li><a href="#">Nunc Adipiscing</a></li>
<li><a href="#">Praesent Dapibus</a></li>
</ul>
<ul class="verticalslider_contents">
<li>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan placerat bibendum. Etiam ut nunc sed purus tempus varius. Donec id magna massa, posuere consectetur neque. Mauris tortor lacus, iaculis a pulvinar luctus, lobortis vel velit. In elementum lorem eu felis fermentum placerat et sit amet ligula. Integer euismod augue eu massa tincidunt consectetur. Suspendisse potenti. Donec in enim sollicitudin enim dignissim imperdiet ut et dolor. Phasellus nec risus vel nunc hendrerit auctor. Sed rhoncus sapien at nisl aliquam luctus. </p>
<h2>Overflow Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan placerat bibendum. Etiam ut nunc sed purus tempus varius. Donec id magna massa, posuere consectetur neque. Mauris tortor lacus, iaculis a pulvinar luctus, lobortis vel velit. In elementum lorem eu felis fermentum placerat et sit amet ligula. Integer euismod augue eu massa tincidunt consectetur. Suspendisse potenti. Donec in enim sollicitudin enim dignissim imperdiet ut et dolor. Phasellus nec risus vel nunc hendrerit auctor. Sed rhoncus sapien at nisl aliquam luctus. </p> </li>
<li>
<h2>Praesent Pulvinar</h2>
<p>Praesent pulvinar, lorem nec ullamcorper semper, ipsum erat vestibulum lacus, in sodales lorem mi in leo. Vestibulum et rhoncus tellus. Curabitur mauris enim, vehicula sit amet euismod a, eleifend at dui. Vivamus sollicitudin, nunc pharetra porttitor lobortis, felis odio hendrerit mi, id ultricies urna enim quis lectus. Suspendisse convallis ipsum egestas velit fermentum ac volutpat dui dictum. Pellentesque sed ultrices justo. Ut lacus odio, porttitor quis tincidunt at, imperdiet vel eros. Duis ac velit neque. Integer semper egestas odio id suscipit. Maecenas eu diam in urna fringilla viverra eget sit amet ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></li>
<li>
<h2>Nunc Adipiscing</h2>
<p>Nunc adipiscing purus id orci rutrum placerat. Nam posuere elementum ipsum quis faucibus. Fusce fermentum turpis ac erat mollis sit amet varius mi placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante justo, varius quis dignissim nec, condimentum in dui. Nulla sed lectus eu nunc vehicula vulputate vel nec velit. Integer eu purus nunc. Donec odio augue, sagittis pellentesque adipiscing id, dignissim vel enim. Maecenas a risus est.</p></li>
<li>
<h2>Praesent Dapibus</h2>
<p>Praesent dapibus metus vitae velit blandit tempor. Donec dignissim tempus neque, a vestibulum massa aliquam sed. Vestibulum velit quam, facilisis vel pharetra nec, bibendum eget mauris. In vitae ligula ac justo varius ullamcorper. Nullam vitae urna eu metus pellentesque vehicula vel sit amet nibh. Cras nec velit dictum neque imperdiet congue in nec eros. Suspendisse ante felis, eleifend sed pellentesque id, sagittis ut magna. .</p></li>
</ul>
</div>
</div>
</body>
最佳答案
我的做法是先去掉.verticalslider_tabs a:link, .verticalslider_tabs a:visited中的230px宽度，然后修改display要显示为 table 的列表项:
.verticalslider_tabs li{ display:table; }
要修复边框，您还要将以下内容添加到您的链接中(因为这是您当前的边框):
border-bottom: 1px solid #666;
margin-bottom: -1px;
关于javascript - 如何使垂直框中内容框的高度大于按钮的实际大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15266615/