Question

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

＆＃13;

<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>

＆＃13;

  new Vue({el: '#carousel',
    data: {
      slide: 0,
      sliding: null
    },
    methods: {
      onSlideStart: function(slide) {
        this.sliding = true
      },
      onSlideEnd: function(slide) {
        this.sliding = false
      }
    }
  })

＆＃13;

Answer 1

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

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

修复此问题并返回减少的测试用例。

Answer 2

如何将li包裹在div中，并将text-align:center的财产提供给div

.form-box {
  text-align: center;
}

.form-box label {
  text-align:left;
  position:relative;
  left:100px;
}

我将您的div命名为班级form-box 标签在左侧对齐，您可以通过删除或修改这些属性来更改它。

＆＃13;

.form-box {
  text-align: center;
}

.form-box label {
  text-align: left;
  position: relative;
  left: 100px;
}

.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;
}

＆＃13;

<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>
    <div class="form-box">
      <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" class="button"></li>
    </div>
  </ul>
</form>

＆＃13;

如何在不改变布局的情况下居中形

2 个答案: