黑马程序员技术交流社区

标题: HTML中文本框的长度 [打印本页]
作者: 李君言    时间: 2013-5-1 23:15
标题: HTML中文本框的长度
本帖最后由 李君言 于 2013-5-3 00:10 编辑

<html>
<head>
<title></title>
</head>
<body>
  <table>
    <tr>
      <td>用户名</td><td><input type="text" size="30"/></td>
    </tr>
    <tr>
      <td>密码</td><td><input type="password" size="30"/></td>
  </table>
</body>
</html>

上面我把"text"和"password" 的size都设置成了30，但是在浏览器显示的时候宽度却不一样，
是不是我设置方法有问题？
跟浏览器有没有关系？
不设置size时，宽度就一样，但是是默认的宽度
作者: 刘茂林    时间: 2013-5-1 23:48
本帖最后由 刘茂林 于 2013-5-1 23:50 编辑
  1. <html>
  2. <body>
  3. <form>
  4. 用户：
  5. <input type="text" name="user" size="30">
  6. 密码：
  7. <input type="password" name="password" size="30">
  8. </form>
  9. <p>
  10. </p>
  11. </body>
  12. </html>
复制代码
不要用table 你看我的。。

还有 貌似你的没问题 我试过了
作者: 李君言    时间: 2013-5-2 00:15
刘茂林 发表于 2013-5-1 23:48
不要用table 你看我的。。

还有 貌似你的没问题 我试过了


这个是我测试我写的那个代码的图，难道是浏览器问题？我的是IE10
作者: xiaoyan0101    时间: 2013-5-2 01:38
这些东西其实不必过于在意的！每一个浏览器的内核都有不一样！像你这种情况，可以升级IE版本！或者只能使用其他浏览器！主要用在主流浏览器上测试！在不同的浏览器上，页面上还是会有一些差别的。比如常见的IE和火狐，我的软件页面在两种浏览器上是有一定的差别的！这就是内核的差异！但还是有一些浏览器是可以通用的！一般来说，360和IE的效果是一样的！
作者: 张伟86    时间: 2013-5-2 09:42
本帖最后由 张伟86 于 2013-5-2 09:50 编辑

是浏览器内核影响的。可以使用input标签的width属性来定义文本框长度，可以避免长度不一样的情况(css就是好，美观在哪里呢？就在这里)。例如修改代码如下：
  1. <html>
  2. <head>
  3. <title></title>
  4. </head>
  5. <body>
  6.   <table>
  7.     <tr>
  8.       <td>用户名</td><td><input type="text" size="30"/></td>
  9.     </tr>
  10.     <tr>
  11.       <td>密码</td><td><input type="password" size="30"/></td>
  12.     </tr>

  14.     <tr>
  15.         <td>用户名</td><td><input type="text" name="textfield" style="width:100px" /></td>
  16.     </tr>
  17.     <tr>
  18.         <td>密码</td><td><input type="password" name="textfield2" style="width:100px" /></td>
  19.     </tr>
  20. </table>
  21. </body>
  22. </html>
复制代码
结果如图(chrome/猎豹/IE8测试结果)：

1_text.jpg (14.29 KB, 下载次数: 43)

1_text.jpg

1_text_chrome(liebao).jpg (21.15 KB, 下载次数: 25)

1_text_chrome(liebao).jpg




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2