html - 电子邮件输入字段宽度仅随内联样式变化

Question

我有一个电子邮件输入字段，它以内联样式设置为 80% 宽度。我将宽度参数移动到宽度为 80% 的类，但现在宽度显示为 100%。

html:

<div class="center_text_grid mktg_text">
<input type="text" class="joinpage_input" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" font-size: 18px;" required></div>

CSS:

.center_text_grid {
    display: grid;
    grid-column: 4 / 15;
    grid-row: 20 / 20;
    display: block;
    overflow: auto;
    padding-left: 0%;
    align-items: center;
    justify-items: center; }

.mktg_text{
    font-family: roboto_thinregular;
    font-size: 13pt;
    color: rgb(117,163,126);
    line-height: 1.5; }

.joinpage_input{
    border-radius: 15px;
    border-style: ridge;
    border-color: rgb(250,250,250);
    border-width: 1px;
    background-color: black;
    height: 45px;
    width: 80%;
    text-align: center;
    font-family: robotoregular;
    font-size: 18pt;
    font-weight: bold;
    color: rgb(150,150,150);
    letter-spacing: 2px; }

::placeholder {
    color: rgb(150,150,150);
    font-family: camphorW01-Thin,calibri,arial;
    font-size: 12pt;
    opacity: 1;
}

为什么width: 80%;当它是按钮上的类而其他两个类没有宽度参数时进行管理？为什么它作为内联样式而不是类样式工作？

Answer 1

代码可能看起来像这样:

.joinpage_input {
  width: 80%;
  height: 45px;
  border: 1px ridge rgb(250, 250, 250);
  border-radius: 15px;
  background-color: black;
  text-align: center;
  font-size: 18pt;
  font-weight: bold;
  color: rgb(150, 150, 150);
  letter-spacing: 2px;
}

::placeholder {
  color: rgb(150, 150, 150);
  font-size: 12pt;
}

<div>
  <input id="email_field" name="email_field" class="joinpage_input" type="email" placeholder="Your email address" autofocus required>
</div>