html - 字段集对齐在 html css 中不起作用

Question

我有 HTML CSS 代码，我希望在其中使用弹出式联系表单进行叠加。HTML代码:

<div class="overlay" id= "form">
    <form accept-charset="UTF-8"  class="infusion-form">


    <!-- First fieldset starts from here -->
        <fieldset id="ff">
            <h2 class="fs-title"> Some heading</h2>
            <div class="infusion-field">    
                <input class="infusion-field-input" placeholder=" First Name " type="text" required="required"/>
            </div>
            <div class="infusion-field">
                <input class="infusion-field-input" required="required" placeholder=" Last Name " type="text" />
            </div>
            <!-- The NEXT button -->
            <input type="submit" name="next" class="next action-button" id = "next" value="Next"  />
        </fieldset>

    <!-- Second feildset start from here -->

        <fieldset id="sf">
            <h2 class="fs-title">  Some heading 2</h2>
            <div class="infusion-field">
                <input class="infusion-field-input" placeholder=" Phone Number " type="text" />
            </div>
            <div class="infusion-field">
                <input class="infusion-field-input"  placeholder=" Email-id " type="email" />
            </div>

            <!-- Submit Button-->
            <input type="submit" name="submit" class="submit action-button" id = "submit" value="Submit"  />
        </fieldset>
    </form>
</div>

对应的CSS代码为

.overlay {
          position: fixed;
          top: 0;
          left: 0;
          display: none;
          width: 100%;
          height: 100%;
          background-color: rgba(204,204,204,0.8);
          z-index: 10;
        }
.infusion-field-input {
  width: 100%;
  margin-bottom: 30px;
  width: 281px;
  height: 30px;
}
.infusion-form fieldset {
  background: #c8e6c9;
  border-radius: 3px;
  margin-top: 10px;
  padding: 30px 30px;
  box-sizing: border-box;
  width: 20%;
  opacity: 1;
  margin-left: 769px;
  position: absolute;

}

/*//Hidden field sets*/
.infusion-form fieldset:not(:first-of-type) {
  display: none;
}


/*Button*/
.infusion-form .action-button {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #4CAF50;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

.infusion-form .action-button:hover, .infusion-form .action-button:focus {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

.infusion-form .action-button:active{
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);

}

.infusion-form .action-button:disabled{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

现在，每当我缩小屏幕尺寸时，我的 contact-f0rm 弹出窗口都不会相应移动。如果尺寸进一步减小，它有时会离开屏幕。

无法找到需要修改的 div/class。 JS Fiddle

Answer 1

我想你想让表格居中，所以使用左右边距的尖端来自动消除位置绝对

.infusion-form fieldset {
    background: #c8e6c9;
    border-radius: 3px;
    margin-top: 10px;
    padding: 30px 30px;
    box-sizing: border-box;
    width: 20%;
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
}

在浏览器 Chrome 和 Firefox 中检查过，它可以工作