HTML 模态关闭按钮不起作用 + 里面的内容没有对齐

Question

我检查了类似的问题，但建议的解决方案对我不起作用。

问题是我的模式关闭按钮不起作用，里面的内容没有对齐。（更新：当我打开边框的时候，我发现一个奇怪的方块正在占用“X”下面的space，但仍然不明白为什么）

我认为这两个问题在某种程度上是相关的，以及顶部的填充，但我无法弄清楚。非常感谢任何帮助。

.mobile-menu {
  float: right;
  padding: 1.1em 0.6em 0.1em 0.9em;
  border: 1px solid;
}

.mobile-menu-modal {
  z-index:3;
  display:none;
  padding-top:85px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4);
}

.mobile-menu-modal-content{
  margin-right:10%;
  margin-left: auto;
  background-color:#fff;
  position:relative;
  padding:0;
  width:40%;
}

.mobile-menu-a {
  text-align:center;
  display:block;
  font-weight:bold;
  font-size:1.2em;
  border-bottom:1px solid #eee;
  padding: 0.5em;
}

<a class="mobile-menu" onclick="document.getElementById('mobilemenu').style.display='block'">Menu Button
  <div id="mobilemenu" class="mobile-menu-modal">
    <div class="mobile-menu-modal-content">
      <span onclick="document.getElementById('mobilemenu').style.display='none'" style="float:right;font-size:2em;cursor:pointer;">&times;</span>
      <div class="clearfix"></div>
      <div style="padding-top:5em">
        <a class="mobile-menu-a">200K+</a>
        <a class="mobile-menu-a">300K+</a>
        <a class="mobile-menu-a">400K+</a>
        <a class="mobile-menu-a">1M+</a>
      </div>
    </div>
  </div>
</a>

Answer 1

您应该在文本之后关闭您的标签（在显示您要在主页上显示的所有内容的时候）。然后为单击按钮时要显示的所有内容启动一个新容器。还要尽量避免内联样式，并为关闭按钮使用额外的 css class。

.mobile-menu {
  float: right;
  padding: 1.1em 0.6em 0.1em 0.9em;
  border: 1px solid;
}

.mobile-menu-modal {
  z-index:3;
  display:none;
  padding-top:85px;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4);
}

.mobile-menu-modal-content{
  margin-right:10%;
  margin-left: auto;
  background-color:#fff;
  position:relative;
  padding:0;
  width:40%;
}

.mobile-menu-a {
  text-align:center;
  display:block;
  font-weight:bold;
  font-size:1.2em;
  border-bottom:1px solid #eee;
  padding: 0.5em;
}

.mobile-menu-modal .close-button {
  float: right;
  font-size: 2em;
  cursor: pointer;
}

<a class="mobile-menu" onClick="document.getElementById('mobilemenu').style.display='block'">Menu Button</a>
  <div id="mobilemenu" class="mobile-menu-modal">
    <div class="mobile-menu-modal-content">
      <span class="close-button" onClick="document.getElementById('mobilemenu').style.display='none'">&times;</span>
      <div class="clearfix"></div>
      <div style="padding-top:5em">
        <a class="mobile-menu-a">200K+</a>
        <a class="mobile-menu-a">300K+</a>
        <a class="mobile-menu-a">400K+</a>
        <a class="mobile-menu-a">1M+</a>
      </div>
    </div>
  </div>

HTML 模态关闭按钮不起作用 + 里面的内容没有对齐

HTML modal closing button not working + contents inside not aligning

html

css

modal-dialog