Question

我正在处理的表单存在两个问题。问题一是我无法将表单放在页面中心。第二个问题是我的提交按钮不会在表单内部居中。

nls(mpg ~ wt^a + disp^b, data=mtcars, start=list(a=3.5, b=0.1), algorithm="port", 
    lower=c(3,0), upper=c(5,0.25))

Nonlinear regression model
model: mpg ~ wt^a + disp^b
data: mtcars
a b 
3 0 
residual sum-of-squares: 78781

Algorithm "port", convergence message: relative convergence (4)

fieldset {
  display: block;
  margin: 0 auto;
  border: 1px solid rgb(233, 69, 0);
  width: 40%;
}
legend {
  background-color: rgb(233, 69, 0);
  color: white;
  padding: 3px 0px;
  text-indent: 5px;
  width: 100%;
}
label {
  clear: left;
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 4% 7px 5px;
  width: 40%;
}
input {
  display: block;
  font-size: 0.9em;
  margin: 7px 0px;
  width: 50%;
}
textarea {
  display: block;
  font-size: 0.9em;
  float: left;
  height: 150px;
  margin: 10px 0px;
  width: 600%;
}
form p {
  text-align: center;
}
input[type="submit"] {
  display: block;
  float: none;
  height: 40px;
  width: 200px;
}
input:focus,
select:focus,
textarea:focus {
  background-color: rgb(220, 255, 220);
}
input:focus:valid {
  background-color: rgb(220, 255, 220) url("go.png") bottom right no-repeat;
  -o-background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}
input:focus:invalid {
  background-color: rgb(255, 232, 233) url("stop.png") bottom right no-repeat;
  -o-background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

Answer 1

您不能在字段集中指定两次保证金：

margin: 0 auto;
border: 1px solid rgb(233, 69, 0);
margin: 10px 0px 10px 5%;   <--- Bad

你应该在字段集上有margin: 0 auto;，并且字段集中的所有控件都应该属于应用了其他边距的div。

编辑：这是字段集下半部分的hack，以使其以预期的方式运行：

<fieldset id="personal">
      <legend>Personal Information</legend>
      <label for="name">Name: *</label>
      <input type="text" name="name" id="name" size="40">
      <br>
      <label for="eMail">E-mail Address: *</label>
      <input type="text" name="eMail" id="eMail">
      <br>
      <label for="favBeer">Favorite Beer Style:</label>
      <select name="favBeer" id="favBeer">
        <option value="IPA">IPA</option>
        <option value="Saison">Saison</option>
        <option value="Porter">Porter</option>
        <option value="Pilsner">Pilsner</option>
        <option value="Hefeweizen">Hefeweizen</option>
        <option value="Stout">Stout</option>
        <option value="Other">Other</option>
      </select>
      <br>
      <label for="comments">Additional Information:</label>     
          <textarea name="comments" id="comments" style="float: left; margin: 0 auto; width: 50%" rows="5"></textarea>
          <div class="button" style="margin: 0 auto; width: 200px;display: block;">
            <input type="submit" value="Sign Me Up">
          </div>
</fieldset>

Answer 2

你不能在任何地方关闭最后两个<label>。正确的代码是：

  <label for="comments">Additional Information:
    <label>
      <textarea name="comments" id="comments" cols="55" rows="5></textarea>
    </label>
  </label>

  <div class="button">
    <input type="submit" value="Sign Me Up" />
  </div>
</fieldset>

您需要编辑css以使按钮位于clear的底部，并使按钮居中：

.button {      /*     */
  clear: left; /* NEW */
}              /*     */

input[type="submit"] {
  display: block;
  float: none;
  height: 40px;
  width: 200px;
  margin: 0 auto; /* NEW */
}

工作示例：https://jsfiddle.net/m0g9tzxz/1/embedded/result/

使表单居中 - CSS

2 个答案: