html - 将 HTML 输入表单宽度设置为 100%

Question

我有这个 HTML 表单，之前我将输入字段的宽度设置为 100%，但我做了一些更改，但不知道是什么导致了更改。

    <form action="/forms.php" method="post">
    <div>
        <input type="text" id="name" name="fullname" placeholder="Name" width:100%>
    </div>
    <div>
        <textarea id="msg" name="message" placeholder="Description"></textarea>
    </div>
    <div>
        <input type="text" name="emailaddress" placeholder="Email Address">
        <input type="text" name="contactno" placeholder="Contact Number">
    </div>
        <input type="submit" name="send" value="Submit" id="subsubmit" class="btn2"/>
    </form>

我已经在我的 HTML 中添加了以下 CSS

.input {
width: 100%;
}

.textarea {
width: 100%;
}

.form {
width: 100%;
}

fiddle 链接 - https://jsfiddle.net/v83g4003/

Answer 1

input textarea form 是 HTML 标签而不是类。您在 HTML 标记之前在 css 中使用了 .，这表明它是一个类，这就是您的 css 无法正常工作的原因。

只需在您的 css 中删除 .

堆栈片段

input {
  width: 100%;
}

textarea {
  width: 100%;
}

form {
  width: 100%;
}

<form action="/forms.php" method="post">
  <div>
    <input type="text" id="name" name="fullname" placeholder="Name" width:100%>
  </div>
  <div>
    <textarea id="msg" name="message" placeholder="Description"></textarea>
  </div>
  <div>
    <input type="text" name="emailaddress" placeholder="Email Address">
    <input type="text" name="contactno" placeholder="Contact Number">
  </div>
  <input type="submit" name="send" value="Submit" id="subsubmit" class="btn2" />
</form>