Question

我知道网站上已经提出过这类问题，但我的情况有所不同。我正在设计一个自适应聊天应用程序，我想在modal dialog中使用html和css以及JS创建注册表单。在模态内容中我有一个包含标题<h1>的标题，并在下面注明表格。

在表单中，我有两个按钮，我想将它们放在模态对话框的右下角。我试图将父div定位为relative，然后将子div定位为绝对属性：right：0;底部：0;但那没用。还尝试将子div定位为固定，但后来我从窗口右下方的模态中找到它。

HTML：

 <!-- The Modal -->
<div class="modal">
  <!-- Modal content -->
  <div class="modal-content">

    <form>
      <div class="p-div">
        <labe>Email:</labe>
        <input type="text" name="email" required>

        <div class="c-div">
          <button type="button">Reset</button>
          <button type="submit">Sign up</button>
        </div>
      </div>
    </form>
  </div>
</div>

CSS：

    /* The Modal (background) */
.modal {
    display: block; 
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: rgb(200, 200, 200);
    margin: 8% auto; 
    border-radius: 1px;
    width: 88.7%; 
    height: 89.3%;

}

.p-div{
  padding: 16px; 
  position: relative;
}

input{
  display:block;
}

.c-div{
  position: absolute; 
  right: 0; 
  bottom: 0; 
}

这是fiddle

有什么建议吗？

提前致谢！

Answer 1

这是你小提琴的一个叉子，我把c-div从p-div容器中打破然后绝对定位它。

https://jsfiddle.net/e1z07xat/3/

.c-div {
  position: absolute; 
  right: 0; 
  bottom: 0; 
  width: 165px;
}

如何在模态对话框的右下角的<form>中放置div？

1 个答案: