0

我怎样才能使我的垂直标签的内容框是动态的，并且他的高度与按钮一样长，或者更大是有更多的内容？这是算法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>
4

1 回答 1

0

我这样做的方法是首先从 中删除 230px 宽度.verticalslider_tabs a:link, .verticalslider_tabs a:visited，然后修改display列表项以显示为table：

.verticalslider_tabs li{ display:table; }

JSFiddle 示例。

要修复边框，您还需要将以下内容添加到链接中（因为这就是您拥有当前边框的内容）：

border-bottom: 1px solid #666;
margin-bottom: -1px;
于 2013-03-07T08:56:01.853 回答