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;应该解决您的问题。