Question

以下表格在OS X，iPhone和iPad上的Safari，Chrome和Firefox中看起来很不错Android系统。

，与Chrome相比，Safari和Firefox中的文本输入字段略大一些

Lubuntu中的Firefox决定几乎输入字段宽度的两倍。它突破了div块。

一种解决方案是在CSS 中设置输入字段的宽度。这意味着每个不同的大小都需要另一个CSS块。以这种方式编辑多个文本输入类型字段的宽度更容易，但是，每隔一个宽度都需要另一个CSS代码块。

这就是为什么我想探索其他可能性。

我可以在某处设置“1尺寸”的宽度吗？例如：<input type="text" size="15" />和1 size-width = 10px;应该将文本输入字段渲染为150px宽。
我可以包含第二个支持的字体系列并且看起来很好吗？
我可以让输入类型突破div吗？

请注意，我正在寻找一个简单而优雅的解决方案不 “设置固定的文字输入宽度”。如果您认为没有其他解决方案，请说明原因。

body{
    margin: auto;
    margin-top: 20px;
    max-width: 1050px;
    font-family: Arial;
}
h3{
    margin: 10px 0px;
    text-decoration: underline;
}
.leftmenu{
    float: left;
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    width: 140px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #666666;
}

<form action="login/submit" method="post">
  <div class="leftmenu">
    <h3>Log in</h3>
    Naam: <br />
    <input type="text" name="username" size="15" /> <br />
    <br />
    Wachtwoord: <br />
    <input type="password" name="password" size="15" /> <br />
    <br />
    <input type="submit" name="login_form" value="login" />
    <br />
  </div>
</form>

其他操作系统上的输入大小不同

0 个答案: