我遇到的问题是我的表中的<td>
标记导致我使用的JQuery时间选择器垂直显示HH:MM
而不是水平显示<td>
。在<td>
标记之外,时间选择器显示正常,但在其中显示垂直。我相信浏览器会使用vertical-align属性呈现<td>
标记,我想知道是否有覆盖它的方法,因此 .time_pick {
position: relative;
display: inline-block;
margin: auto;
width: 60%;
}
.timepicker_wrap {
padding: 10px;
border-radius: 5px;
z-index: 998;
display: none;
box-shadow: 2px 2px 5px 0 rgba(50,50,50,0.35);
background: #f6f6f6;
border: 1px solid #ccc;
float: left;
position: absolute;
top: 27px;
left: 0;
}
.time,
.mins,
.meridian {
width: 60px;
float: left;
margin: 0 10px;
font-size: 20px;
color: #2d2e2e;
font-family: arial;
font-weight: 700;
}
.ti_tx,
.mi_tx,
.mer_tx {
width: 100%;
text-align: center;
margin: 10px 0;
}
.prev,
.next {
cursor: pointer;
padding: 18px;
width: 28%;
border: 1px solid #ccc;
margin: auto;
background: url(../images/arrow.png) no-repeat;
border-radius: 5px;
}
.next {
background-position: 50% 150%;
}
.prev {
background-position: 50% -50%;
}
标记不使用vertical-align属性?
我提前为非嵌入图片(帐户限制)道歉。
以下是时间选择器在表格中的显示方式:
[ 1
编辑:
这是我用于Time Picker外观的一些CSS:
[ 2
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<input type="text" name="timepicker1" size="70%" id="timepicker1" />
编辑:
表格,TH,TD标签的内联样式表:
{{1}}
答案 0 :(得分:0)
您需要为<div class="timepicker_wrap"></div>
添加宽度
如果你添加它,它应该工作:
.timepicker_wrap{
width: 240px;
}
我认为只是timepicker_wrap
容器中的空间不足以放置在彼此旁边。