logo标签列表

CSS: Div位置错误

css
3
我已经上传了我的屏幕的一部分如下：
它是论坛的一部分，因此在它上面和下面都有元素。 "Response Req.. Date" 有一个标签、一个日期选择器和两个时间下拉选择控件。我尝试设置日期选择器元素的宽度和右边距，以便时间选择器会定位在它旁边。但它总是坐在它下面。
<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>

日期选择器插入了一个脚本标签，这会引起问题吗？可能不会。
从 Firebug 计算出的 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

时间选择器：

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
你能展示一下你在截图中使用的CSS吗？还有你使用的是哪个datePicker和timePicker？ - Marcel Korpel
谢谢Marcel。CSS已经显示在上面了。日期选择器来自YUI，但时间选择器是自定义渲染的（两个选择输入）。我使用Joda时间，所以不确定是否已经有类似的控件可用。除了定位之外，一切都正常，我认为可以通过CSS解决。 - bsr
3个回答
1
你应该将那些 div 盒子显示为行内元素：
.datePicker, .timepicker {
    display: inline;
}
它没有起作用...虽然我可以在Firebug中看到CSS应用了。 - bsr
1

一个没有浮动的 div 元素总是会将下一个内容推到它的下方。你可以尝试在 div 上设置 display:inline，或者将其转换为 span 元素。

我尝试在timepicker div上使用float:right，并在datepicker上添加右边距+设置宽度，期望timepicker可以内联显示，但是没有。虽然我在样式后应用了clear，但页面中的其他控件也向右浮动...我知道我错过了什么，但对我来说不直观 :-( - bsr
span没有起作用，可能是因为时间和日期选择器中每个都有许多包含的div。 - bsr
你的时间选择器设置了clear:both属性，这会使它出现在任何前面元素的下方。你可以尝试将两个块级元素设置为display:block，移除clear属性并添加float:left。 - pederOverland
0

display: inline;应该可以解决你的问题。

2
你能在回答中提供更多细节吗？ - BJ Myers
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接