CSS定位

Question

我已經上傳我的屏幕下方（鏈接：http://yfrog.com/0d30127380p）的一部分 alt text http://img13.imageshack.us/img13/9098/30127380.png

這是一個論壇的一部分，所以有上面和下面的元素。 「響應請求日期」有一個標籤，一個日期選擇器和兩個時間下拉選擇控件。我嘗試設置datepicker元素的寬度和右邊距，以便時間選擇器可以放在旁邊。但它總是坐在它下面。我不擅長CSS定位，所以任何建議將不勝感激。

<div class="wrapper "> 
    <label for="responseRequiredDate"> 
     Response Required Date 
     <span class="indicator">*</span> 
    </label> 
    <input type="hidden" name="responseRequiredDate" value="struct" /><div class="datetimepicker"> 
    <div class="datePicker"> 
    </div>   
    <script> ...</script> 
    <div class="timepicker"><select .... 
    </div> </div> 

日期選取器插入腳本標記，會導致問題。可能不會。

下面給出了從螢火蟲計算出來的CSS。當前唯一不同於繼承的風格是display：inline ..我嘗試了float，clear，margin等，但沒有成功。爲了清楚起見，刪除它們。請讓我知道如果你需要補充信息。

datePicker : 

font-family verdana,arial,helvetica,sans-serif 
font-size 12.8px 
font-weight 400 
font-style normal 
color #222222 
text-transform none 
text-decoration none 
letter-spacing normal 
word-spacing 0 
line-height 20.7833px 
text-align start 
vertical-align baseline 
direction ltr 
Background 
background-color transparent 
background-image none 
background-repeat repeat 
background-position 0 0 
background-attachment scroll 
opacity 1 
Box Model 
width auto 
height auto 
top auto 
right auto 
bottom auto 
left auto 
margin-top 0 
margin-right 0 
margin-bottom 0 
margin-left 0 
padding-top 0 
padding-right 0 
padding-bottom 0 
padding-left 0 
border-top-width 0 
border-right-width 0 
border-bottom-width 0 
border-left-width 0 
border-top-color #222222 
border-right-color #222222 
border-bottom-color #222222 
border-left-color #222222 
border-top-style none 
border-right-style none 
border-bottom-style none 
border-left-style none 
Layout 
position static 
display inline 
visibility visible 
z-index auto 
overflow-x visible 
overflow-y visible 
white-space normal 
clip auto 
float none 
clear none 
-moz-box-sizing content-box 
Other 
cursor auto 
list-style-image none 
list-style-position outside 
list-style-type disc 
marker-offset auto 

Timepicker：

font-family verdana,arial,helvetica,sans-serif 
font-size 12.8px 
font-weight 400 
font-style normal 
color #222222 
text-transform none 
text-decoration none 
letter-spacing normal 
word-spacing 0 
line-height 20.7833px 
text-align start 
vertical-align baseline 
direction ltr 
Background 
background-color transparent 
background-image none 
background-repeat repeat 
background-position 0 0 
background-attachment scroll 
opacity 1 
Box Model 
width auto 
height auto 
top auto 
right auto 
bottom auto 
left auto 
margin-top 0 
margin-right 0 
margin-bottom 0 
margin-left 0 
padding-top 0 
padding-right 0 
padding-bottom 0 
padding-left 0 
border-top-width 0 
border-right-width 0 
border-bottom-width 0 
border-left-width 0 
border-top-color #222222 
border-right-color #222222 
border-bottom-color #222222 
border-left-color #222222 
border-top-style none 
border-right-style none 
border-bottom-style none 
border-left-style none 
Layout 
position static 
display inline 
visibility visible 
z-index auto 
overflow-x visible 
overflow-y visible 
white-space normal 
clip auto 
float none 
clear both 
-moz-box-sizing content-box 
Other 
cursor auto 
list-style-image none 
list-style-position outside 
list-style-type disc 
marker-offset auto 

Answer 1

好吧，那不是浮動會一直推低自己的下一個內容一個div。您可以嘗試在div上設置顯示內聯，或者將其設置爲跨度。

Answer 2

你應該顯示的格盒的內聯元素：

.datePicker, .timepicker { 
    display: inline; 
} 

Answer 3

display: inline;應該解決您的問題。