For my project, I am facing an issue with CSS definition.
I would like Jack, Tom, Shansa, and Stack to appear in the same horizontal line, like this:
Jack Tom Shansa Stack
However, Jack needs to be associated with a file input, and its CSS definition is different from the others.
Below is the CSS and HTML code snippet:
.upBtDiv {
position: relative;
overflow: hidden;
display: inline-block;
/*display: inline;*/
top: 8px;
}
.upBtDiv a {
cursor: pointer;
}
.upBtDiv input {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}<table border="2px" cellspacing="0">
<tr>
<td style="width:85%" colspan="10">
<div style="padding:5px" id="attFId">
<div class="upBtDiv">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="fUpl()" data-options="iconCls:'icon-newfile'">Jack</a>
<input type="file" id="iT">
</div>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-more'">Tom</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">Shansa</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-tip'">Stack</a>
</div>
</td>
</tr>
</table>Currently, Jack appears above the others, like this:
Jack
Tom Shansa Stack
I have attempted adding top: 8px to the input style and the a style, but it was unsuccessful.
Changing top: 8px to padding: 5px in the upBtDiv style also did not work.
Everything seems correct to me, but I am unsure how to adjust the position of Jack. Can anyone assist me?