如何更改输入框的宽度?
问题描述:
我想改变我的网站标题中的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>
答
在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;"
答
说明答案是正确的。或者,将宽度设置移动到CSS类,并从HTML完全丢失样式。你不需要添加一个类到元素,你可以参考它,因为它里面的div标记为class="input-group"
。像这样:
<input type="email" value="{% if customer %}....
在CSS样式表
(.css文件)地址:
.input-group input[type="email"]{
margin:0;
width:100%;
max-width:300px;
}
这将风格类型 “电子邮件” 任何输入,这似乎带有class =“输入 - 一个div内组”。您不必每次都设置宽度。要更改输入组中的所有输入框,它将是:
.input-group input{
margin:0;
width:100%;
max-width:300px;
}