div宽度设置无效问题解决

问题描述：

要设置两个div在同一行显示，都加入了display:inline样式，但是其中一个div的宽度设置无效，在浏览器显示它的宽度始终是1003px。

 

解决办法：

方法1/给div加入样式：float:left;//向左浮动，宽度设置有效，不能在目标位置显示。

方法2/给div加入样式：display:inline-block;//宽度设置有效，可设置任意位置显示。

 

原因：

块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性。

而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。

我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们就要用inline-block。

inline-block属性，可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。

代码如下：

<div id="calendar" class="form-group" style="width:260px;display: inline-block;position:relative;top: 26px;">
    <div class="input-prepend input-group" style="width: 260px;">
                                <span class="add-on input-group-addon">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"/>
                                </span>
        <input type="text" style="width: 220px" name="collection" id="collectionTime"
               class="form-control" value="2015/01/01 - 2015/01/01"
               class="span4">
    </div>
</div>
&nbsp;&nbsp;&nbsp;
<div style="display: inline;position: relative;top: -2px;">
    <button ng-click="choose()" class="btn btn-success">筛选</button>
</div>