Question

我目前有以下两种形式。

form {
  text-align: center;
  width: 100%;
}

<form>
  <input type="text" name="email">
  <input type="submit" value="Submit">
</form>

和

input[type=text] {
  width: 80%;
  padding: 1vh;
}

<form>
  <p>First Name:</p>
  <input type="text" name="firstname"><br>
</form>

我如何为每张表格制定不同的规则？第一个需要内容中心对齐，第二个需要左/左边对齐的内容。

如果我更改了对齐和尺寸更改的css。

提前致谢。

我已经更新了表单，如何才能使文本输入仅为左侧表单设置样式？我不希望中心文本输入规则。

.form-container {
background-color: #ff8e08;
width: 90%;
margin: auto;
}

.center-form {
text-align: center;
width: 100%;
}

.left-form {
text-align: left;
margin-left: 2vh;
}
input[type=text] {
width: 80%;
}
input[type="text"] {
padding: 1vh;
}

<div class="applicationform">
<br>

<form class="left-form">
<p>First Name:</p>
<input type="text" name="firstname">
</form>
</div>
</div>
<br>

<form class= "center-form">
<input type="text" name="email">
<input type="submit" value="Submit">
</form>

Answer 1

为它们添加不同的类名。

CSS：

.center-form {
  /* center-form specific rules here */
}

.left-form {
 /* left-form specific rules here */
}

HTML：

<form class="center-form">
  <input type="text" name="email">
  <input type="submit" value="Submit">
</form> 

<form class="left-form">
  <p>First Name:</p>
  <input type="text" name="firstname"><br>
</form>

如果你想分享他们都需要的一些CSS规则：

.form {
    /* shared CSS rules */
}

然后，在HTML中将这个form类名称添加到它们中，如下所示：

<form class="form center-form">
  <input type="text" name="email">
  <input type="submit" value="Submit">
</form> 

<form class="form left-form">
  <p>First Name:</p>
  <input type="text" name="firstname"><br>
</form>

记住，覆盖center-form和left-form之类的类名应该在此form实用程序类名后面。

针对您的具体情况，请将CSS更改为：

body {
  margin: 0; /* Remove user agent default styles */
}

.center-form {
  text-align: center;
  width: 100%;
}

.left-form {
  text-align: left;
  margin-left: 2vh;
}

input[type=text] {
  width: 80%;
}

input[type="text"] {
  padding: 10px;
}

对不同形式的相同元素有不同的css规则

1 个答案: