日期:2014-05-17  浏览次数:20567 次

[CSS]inline型标签的width属性height属性line-height属性不起作用
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body style="font-size:12px;">
  为什么会出现这样情况?在不改动!DOCTYPE声明的情况下应该如何解决?<br /><br />
  <span style="width:300px;height:100px;border:1px solid green;padding:5px;">
    span的width和height属性失效,上边框消失
  </span><br /><br />
  <label style="width:300px;height:100px;border:1px solid green;padding:5px;">
    label的width和height属性失效
  </label><br /><br />
  <div style="width:300px;height:100px;border:1px solid green;padding:5px;display:inline;">
    加入display:inline后width和height属性失效
  </div><br /><br />
  <div style="width:300px;height:100px;border:1px solid green;padding:5px;">
    与上面一条对比
  </div><br /><br />
  <div style="width:300px;border:1px solid green;padding:5px;line-height:50px;">
    div的line-height只对文字起到了作用,却对input没有起到作用
    div的line-height只对文字起到了作用,却对input没有起到作用<br />
    <input type="text" /><input type="text" /><input type="text" />
  </div><br /><br />
  现在请把代码最顶上一行去掉再对比一下效果
</body>
</html>


------解决方案--------------------
display:block