<input name="txtId" type="text" size="20" />
or
<input name="txtId" type="text" style="width: 150px;" />
哪个是最佳的跨浏览器代码?
当然,这取决于需求,但我很好奇人们是如何决定的,基于什么。
<input name="txtId" type="text" size="20" />
or
<input name="txtId" type="text" style="width: 150px;" />
哪个是最佳的跨浏览器代码?
当然,这取决于需求,但我很好奇人们是如何决定的,基于什么。
当前回答
可以使用样式和宽度来调整文本框的大小。 下面是它的代码。
<!DOCTYPE html > < html lang =“en”> < >头 < meta charset = " utf - 8 " > > < /头 身体< > < div对齐= "中心" > <形式方法=“post”> <div class="w3-row w3-section"> <div class="w3-rest" align =" center"> <input name="lastName" type="text" id="myInput" style="width: 50%"> < / div > < / div > > < /形式 < / div > 身体< / > < / html >
使用align将文本框居中。
其他回答
你可以两者都用。css样式将覆盖支持css的浏览器中的size属性,并使字段具有正确的宽度,对于那些不支持css的浏览器,它将退回到指定的字符数。
编辑:我应该提到size属性不是精确的大小调整方法:根据HTML规范,它应该是指输入一次能够显示的当前字体的字符数。
然而,除非指定的字体是固定宽度/单行字体,否则这并不能保证指定的字符数量将实际可见;在大多数字体中,不同的字符有不同的宽度。这个问题有一些关于这个问题的很好的答案。
下面的代码段演示了这两种方法。
@font-face { font-family: 'Diplomata'; font-style: normal; font-weight: 400; src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } @font-face { font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 300; src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } p { margin: 0 0 10px 0; } input { font-size: 20px; } .narrow-font { font-family: 'Open Sans Condensed', sans-serif; } .wide-font { font-family: 'Diplomata', cursive; } .set-width { width: 220px; } <p> <input type="text" size="10" class="narrow-font" value="0123456789" /> </p> <p> <input type="text" size="10" class="wide-font" value="0123456789" /> </p> <p> <input type="text" size="10" class="narrow-font set-width" value="0123456789" /> </p> <p> <input type="text" size="10" class="wide-font set-width" value="0123456789" /> </p>
可以使用样式和宽度来调整文本框的大小。 下面是它的代码。
<!DOCTYPE html > < html lang =“en”> < >头 < meta charset = " utf - 8 " > > < /头 身体< > < div对齐= "中心" > <形式方法=“post”> <div class="w3-row w3-section"> <div class="w3-rest" align =" center"> <input name="lastName" type="text" id="myInput" style="width: 50%"> < / div > < / div > > < /形式 < / div > 身体< / > < / html >
使用align将文本框居中。
HTML控制元素的语义。CSS控制页面的布局/样式。当你控制你的布局时使用CSS。
简而言之,永远不要使用size=""
大小在不同浏览器及其可能的字体设置之间是不一致的。
px中设置的宽度样式至少是一致的,模数框大小问题。如果您想要相对于字体大小设置样式,则可能还需要在' em '中设置样式(不过,除非显式设置输入字体族和大小,否则这将不一致),如果您正在制作液体布局表单,则可能需要在' % '中设置样式。无论哪种方式,样式表都可能比内联样式属性更可取。
您仍然需要size <select multiple>来获得与选项正确对齐的高度。但我不会在<input>上使用它。
如果你使用宽度(第二个例子),你会得到更多的一致性。