为什么下面的input标签会比右浮动的标签长

<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
    <title>Input</title>
    <style type="text/css">
     div{
      width: 800px;
      margin: 0 auto;
     }
     input:nth-child(1){
      float: left;
     }
     input:nth-child(2){
      float: right;
     }
     input:nth-child(3){
      width: 100%;
     }
    </style>
</head><body>
    <div>
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
</body>
</html>

慕勒5592297 2017-03-28

源自：HTML5展望 3-1 课程总结

收起

2回答

Miss路回答被采纳获得+3积分 2017-03-29 10:34:48

是和父元素同宽的呀，input标签的父元素是div，现在不就是和div的宽度一样的吗？现在的宽度就是804px，父元素的宽度是800，再加上input本身的边框的宽度，这个边框的宽度是2px，所以，加上两个边框的宽度总宽度就是800+2*2=804px。

收起回答

慕勒5592297 提问者 #1

非常感谢！另外，想问下如果父元素的宽度是自适应的话，如何保持上下的input能始终对齐呢

2017-03-29 14:13:26
Miss路回复提问者慕勒5592297 #2

可以给input标签统一设置宽度的。

2017-03-29 18:38:22

Miss路 2017-03-28 22:04:57

因为你在第17行设置了宽度为100%。所以宽度要宽

收起回答

提问者慕勒5592297 #1

float:right不是浮动到父元素的最右边么

2017-03-29 09:31:05
提问者慕勒5592297 #2

我错了。。确实是浮动到最右边。但是width:100%不是应该和父元素同宽么，为什么第三个input元素会超出父元素的宽度呀

2017-03-29 09:37:51