ホームページ > 記事 > ウェブフロントエンド > div 内のコンテンツが外部に出ています_html/css_WEB-ITnose
<script type="text/javascript"> $(document).ready(function() { $(".flip").click(function() { $(".panel").slideToggle("slow"); }); $(".flip2").click(function() { $(".panel2").slideToggle("slow"); }); });</script><style type="text/css">div.panel, div.flip, div.panel2, div.flip2 { margin: 0px; padding: 5px; text-align: center; background: #e5eecc; border: solid 1px #c3c3c3;}div.panel { display: none;}div.panel2 { display: none;}ul li { list-style-type: none;}</style><body> <ul> <li> <div style="width: 10%; height: 20px; float: left; text-align: right; overflow: hidden;">例子1</div> <div class="flip" style="width: 88%; height: 20px; float: right;">请点击这里</div> <div class="panel" style="width: 88%; float: right;"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p> </div> </li> <li> <div style="width: 10%; float: left; text-align: right; overflow: hidden;">例子2</div> <div class="flip2" style="width: 88%; float: right;">请点击这里</div> <div class="panel2" style="width: 88%; float: right;"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p> </div> </li> </ul></body>
単語がわからず外に逃げてしまいました
試してみてください
ul li {list-style-type: none; clear: Both;
言葉がわからず、外に逃げましたか? 列 1 をクリックするか、数回クリックすると見つかりますul li {
list-style-type: none;clear: Both;いいえ
単語が見えず外に逃げました ああ
Liezi 1 をクリックするか、さらに数回クリックすると見つかります
写真を送って見てみましょう
こんなのが欲しいです
でもそうなります このようになります
6 階にあります
見ませんでした知らせが来ました、外へ逃げてください
列 1 をクリックするか、さらに数回クリックすると見つかります
列 1 をクリックするか、さらに数回クリックしてください。きっと見つかります
写真を送ってください、見てみましょう
6階にあります
多くのブラウザを試しましたが、どれも問題が発生しませんでした。使用しているブラウザは?
Firefox