Question

您好，

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

Answer 1

内联元素不保留宽度和高度，您需要将display设置为block。

Answer 2

display:inline不支持宽度和高度。试试display:block。

Answer 3

 document.getElementById('Popup').style.display='inline';
                                                  ^^^^

显示内联不支持高度和宽度，因此请使用block

Answer 4

此处无法使用initial的{{1}}和inline属性。 display和flex更合适（对齐方式与第一次加载div时相同）。除此之外，您可以使用inherit，inline-block和block。尝试flex：）

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

4 个答案: