如何更改輸入框的寬度？

我想改變我的網站標題中的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>

來源

2017-10-08 Maximus000

在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;"

來源

2017-10-08 16:20:08 Lal

說明答案是正確的。或者，將寬度設置移動到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; 
}

來源

2017-10-08 16:45:44 Leon

如何更改輸入框的寬度？

回答

相關問題