CSS: Div неправильно расположен

Question

Я загрузил часть моего экрана ниже

Это часть форума, поэтому есть элементы над и под ним. «Response Req .. Date» имеет метку, указатель даты и два выпадающих списка для выбора времени. Я попытался установить ширину элемента datepicker и правое поле, чтобы селекторы времени располагались рядом с ним. Но это всегда сидеть ниже этого.

<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 от Firebug приведен ниже. единственный стиль, в настоящее время отличающийся от унаследованного, это 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, который не перемещен, всегда будет толкать следующий контент под собой. Вы можете попробовать установить display: inline в div или превратить его в span.

Answer 2

Вы должны отобразить эти div-блоки как встроенные элементы:

.datePicker, .timepicker {
    display: inline;
}

Answer 3

display: inline; Нужно исправить вашу проблему.