Question

我知道这是一个简单的问题，但我再次陷入困境。我在我创建的网站上有一个显示当前月份的按钮，问题是当我按下按钮显示月份时，我无法找到不移动内容的方法。我想确保按钮下方有一个显示月份的空间，但它不会移动＆＃34;让我们开始＃34;下。有没有办法做到这一点？

＆＃13;

function myMonth() {
        var month = new Array();
        month[0] = "January";
        month[1] = "February";
        month[2] = "March";
        month[3] = "April";
        month[4] = "May";
        month[5] = "June";
        month[6] = "July";
        month[7] = "August";
        month[8] = "September";
        month[9] = "October";
        month[10] = "November";
        month[11] = "December";
        var d = new Date();
        var n = month[d.getMonth()];
        document.getElementById("monthpick").innerHTML = n;
        }

＆＃13;

#monthpick{
  text-align: center;
  color: #008CBA;
}

.button {
    background-color: #008CBA;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;


}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button1:hover {
  background-color: #008CBA;
  color: white;
}

＆＃13;

 <!DOCTYPE html>
        <html>
        <body>
    
        <div class="monthpicker">
        <br>   
        <p><button onclick="myMonth()" class="button button1">Month</button></p>
        <h2 id="monthpick"></h2>
        <br>
        </div>

        <div class="begin">
        <h2>Let's get started!!!</h2>
        </div>

        
        
       
   
        </body>
        </html>

＆＃13;

Answer 1

＆＃34;让我们开始的原因!!!＆＃34;显示月份时按下行是因为最初用于保存月份的<h2>元素为空，因此其内容高度为0.单击该按钮时，月份将插入{{ 1}}现在需要一个空格（宽度和高度）来显示内容，而且＃34;让我们开始吧！＆＃34;线将被推下来。解决方案很简单：插入一个空格作为<h2>元素的内容作为占位符，如下所示：

<h2>

有了这个，你会看到按钮和＆＃34之间的差距;让我们开始吧！＆＃34;会更大。您可以调整月<h2 id="monthpick"> </h2>元素的边距（顶部和底部）以获得更好的间距。

Answer 2

您可以尝试为monthpick元素添加预定义的高度，以便在添加文本后不需要移动它下面的文字。

但是，这意味着，在生成文本之前，下面的任何元素都会显得格格不入，尽管 - 正如您所要求的那样 - 它肯定会阻止下面的文字移动。

您可以尝试向height: 1px;元素添加monthpick之类的内容，或者只是提供实际高度（生成字体大小为28px）并从那里开始工作。两者都应该如你所愿。

在显示输出

2 个答案: