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

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

于 2012-05-07T04:57:09.840 回答
2 
 document.getElementById('Popup').style.display='inline';
                                                  ^^^^

显示内联不支持高度和宽度所以使用block

于 2012-05-07T05:04:45.547 回答
1

不能使用这里的initial和inline属性display。flex并且inherit更合适（对齐方式与第一次加载 div 时相同）。除此之外，您可以使用inline-block,block和inline-flex. 试试弹性 :)

于 2015-07-05T18:43:28.933 回答