html - 如何在不改变布局的情况下居中表格

Question

我这里有一个 HTML 表单，我用 CSS 设置了样式，我希望表单位于页面的正中心，当然不是固定的，而是在中心。每当我尝试这样做时，字段和标签的布局都会发生变化，所以我想知道如何将表单和所有内容移动到中心而不改变内部所有内容的布局。

.form-style-1 {
  margin: 10px auto;
  max-width: 400px;
  padding: 20px 12px 10px 20px;
  font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.form-style-1 li {
  padding: 0;
  display: block;
  list-style: none;
  margin: 10px 0 0 0;
}

.form-style-1 label {
  margin: 0 0 3px 0;
  padding: 0px;
  display: block;
  color: black;
}

.form-style-1 input[type=text],
.form-style-1 input[type=description],
textarea,
select {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 1px solid #BEBEBE;
  padding: 7px;
  margin: 0px;
  outline: none;
}

.form-style-1 .field-divided {
  width: 25%;
}

.form-style-1 .field-long {
  width: 50%;
}

.form-style-1 .field-select {
  width: 50%;
}

.form-style-1 .field-textarea {
  height: 50px;
}

.form-style-1 input[type=submit] {
  background: #4B99AD;
  padding: 8px 15px 8px 15px;
  border: none;
  color: #fff;
}

.form-style-1 input[type=submit]:hover {
  background: #4691A4;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.form-style-1 .required {
  color: red;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #88;
}

.formb li {
  float: left;
}

.formb li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.formb li a:hover {
  background-color: #555;
}

<form class="move">
  <ul class="form-style-1">
    <li style="list-style: none; display: inline">
      <ul class="formb">
        <li>
          <a href="list.html">list Item</a>
        </li>
        <li>
          <a href="add.html">Add Item</a>
        </li>
        <li>
          <a href="edit.html">Edit Item</a>
        </li>
        <li>
          <a href="remove.html">Remove Item</a>
        </li>
      </ul>
    </li>
    <li><label>Product Name and Number <span class="required">*</span>
    </label><input class="field-divided" name="field1" placeholder="Product" type="text">&nbsp;<input class="field-divided" name="field2" placeholder="Number" type="text"></li>
    <li><label>Description <span class="required">*</span></label>
      <input class="field-long" name="field3" type="description"></li>
    <li><label>Add Product</label> <select class="field-select" name="field4">
				<option value="Advertise">
					Macbook Air
				</option>
				<option value="Partnership">
					Macbook Pro
				</option>
				<option value="General Question">
					Macbook
				</option>
			</select></li>
    <li><label>Additional Comments <span class="required">*</span>
    </label>
      <textarea class="field-long field-textarea" id="field5" name="field5"></textarea></li>
    <li><input type="submit" value="Submit"></li>
  </ul>
</form>

Answer 1

您需要在 HTML 中修复您的界面。您已将导航列表嵌套在表单中。它不属于那里。

.form-style-1 应该在它自己的 nav 容器中，并且在 form 容器之外。

修复该问题并返回一个简化的测试用例。