0

やあ、

高さと幅500pxのdivで小さなポップアップを作成しました.直接表示すると見栄えがします.しかし、デフォルトでdisplay:noneを配置し、ボタンをクリックするたびに表示されるようにすると、ポップアップは高さなしで表示され、幅...理由を教えてください..... 

<!DOCTYPE HTML>
        <html>
         <head>
          <style>
           div{
             width:500px;
             height:500px;
             border:1px solid black;
             background:#988858;
             border-radius:14px;
             box-shadow:5px 5px 10px #666633;
             display:none;
           }
          </style>
         </head>

         <body>
          <button class="button">Click</button>

            <div id="Popup">
               <a href="#" id="Close" onClick="closePopup()">close</a>
            </div>

         </body>

         <script>
           document.getElementsByClassName('button')[0].addEventListener('click',showPopup,false);

           function showPopup(){
            //document.getElementById('Popup').style.width=500+'px';
            //document.getElementById('Popup').style.height=500+'px';
            document.getElementById('Popup').style.display='inline';
           }
           function closePopup(){
            document.getElementById('Popup').style.display='none';
           }

         </script>

        </html>
4

4 に答える 4

5

インライン要素は幅と高さを保持しないため、 を に設定する必要がありdisplayますblock。

于 2012-05-07T04:55:39.120 に答える
2 
 document.getElementById('Popup').style.display='inline';
                                                  ^^^^

インライン表示は高さと幅をサポートしていないため、使用してくださいblock

于 2012-05-07T05:04:45.547 に答える
2

display:inline幅と高さはサポートされていません。試してみてくださいdisplay:block。

于 2012-05-07T04:57:09.840 に答える
1

initialここのinlineプロパティは使用できませんdisplay。flexよりinherit適切です (配置は、div が初めて読み込まれたときと同じです)。それとは別にinline-block、 、blockおよびを使用できますinline-flex。フレックスを試してください:)

于 2015-07-05T18:43:28.933 に答える