宽度和高度不适用于DIV标记

Question

宽度和高度不适用于DIV标记

嗨,

我创建了一个带有高度和宽度为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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bry*_*yan 5

内联元素不保留宽度和高度,您需要设置display为block.

它直接显示它的原因是因为Div标签默认为"display:block;". (2认同)

归档时间：	13 年，7 月前
查看次数：	4840 次
最近记录：	10 年，5 月前