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>