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 に答える