Question

我正在尝试更改我网站标题中的inout框的宽度，但我无法。我尝试使用style= "width: Xpx"，但它不起作用。

有人能帮助我吗？

<div class="input-group">
    <label for="Email" class="visually-hidden">{{ 'contact.form.email' | t }}</label>
      <input type="email" style="margin: 0" style="width:250px;" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field" aria-label="{{ 'layout.footer.newsletter_email_placeholder' | t }}" autocorrect="off" autocapitalize="off">  
    <span class="input-group-btn">
        <button type="submit" class="btn" name="commit" id="subscribe" style="font-size: 16px;">{{ 'general.newsletter_form.submit' | t }}</button>
      </span>
  </div>

Answer 1

在HTML，SGML和XML中，属性不能重复，应该只能在元素中定义一次。

在您的HTML中，您有2个样式属性。请参阅下面的

<input type="email" style="margin: 0" style="width:250px;"

这不符合HTML标准，会导致未定义的行为，因此不同的浏览器会以不同的方式呈现。

在HTML中，当您多次使用相同的属性时，只有第一个属性才会在大多数浏览器中生效。因此，要使您的样式起作用，您应该按如下方式更改HTML

<input type="email" style="margin: 0;width:250px;"

Answer 2

Lals答案是正确的。或者，将宽度设置移动到CSS类，并从HTML中完全丢失样式。您不需要为元素添加类，您可以引用它，因为它位于标记为class="input-group"的div内。像这样：

<input type="email" value="{% if customer %}....

在CSS样式表（.css文件）中添加：

.input-group input[type="email"]{
    margin:0;
    width:100%;
    max-width:300px;
}

这将设置任何类型＆＃34;电子邮件＆＃34;的输入，它出现在div =＆＃34; input-group＆＃34;的div中。你不必每次都设置宽度。要更改输入组中的所有输入框，它将是：

.input-group input{
    margin:0;
    width:100%;
    max-width:300px;
}

如何更改输入框的宽度？

2 个答案: