div标记autowrapp子项

Question

我正在测试如何制作响应式设计UI。出现了这个问题。我认为div的默认行为是包装子项目，它们的总宽度变为div的宽度。

链接到JSfiddle：http://jsfiddle.net/adithyavr/jEEd4/

在上面的示例中，请参阅 #search_area 。该div的宽度应该符合内部文本框和搜索框。但它的HTML标签宽度为1280像素。 w ^

  #search_area{
            height: 100%;
            position:relative;
            left:50%;
            top:20%;
           }

为什么会出现这种specefic错误。提示可以帮助我。

提前谢谢。以下是该问题的屏幕截图。

Answer 1

你的css

#header_area{
 background:#B50E24;
 width:100%;
 height:10%;
}

您已指定width:100%因此它将占据100％的宽度。

除此之外，<div>是block元素。 block个元素占用完整的可用宽度。如果您希望它仅包装整个内容，请提供display: inline-block