div在div中进入下一行Mozilla firefox后的元素

我在DIV内有一个文本框& div外的按钮。我需要两个（文本框&按钮）在同一行。在Internet Explorer中，两者都在同一行。但是，在Mozilla中，按钮即将进入下一行。附上截图。div在div中进入下一行Mozilla firefox后的元素

图片： Viewed in Mozilla Viewed in IE

ASPX/HTML代码：

<div class="fileInputs"> 
<asp:FileUpload class="hiddenFile" ID="fucAttachment" runat="server" onmouseout="copyContents('fucAttachment');" /> 
<div class="visibleField"> 
    <input type="text" readonly="readonly" id="visibleAttachmentField" style="width: 158px; height: 18px; margin-left: -4px;" /> 
</div> 
<input type="button" class="browseBtn" value="Browse"/>

CSS：

div.fileInputs 
    { 
     position: relative; 
     z-index: 0; 
    } 
    .hiddenFile 
    { 
     position: relative; 
     text-align: right; 
     -moz-opacity: 0; 
     filter: alpha(opacity: 0); 
     opacity: 0; 
     z-index: 2; 
     width: 220px; 
     /*cursor: pointer; cursor: hand; */ 
    } 
    .visibleField 
    { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     z-index: 1; 
     margin-left: 4px; 
     display: inline-block;    
    } 
    .browseBtn, .uploadBtn 
    { 
     cursor: pointer; 
     float: RIGHT; 
     position: ABSOLUTE; 
     margin-left: -60PX; 
     height: 20px; 
     font-size:12px; 
     font-family: Arial; 
     padding-left: 6px; 
     padding-right: 6px; 
     border:1px solid #768ea5; 
     background-image: none; 
     background-color: rgb(214,211,206); 
    }

来源

2013-11-04 user1199842

请显示_actual_ HTML代码 - 讨论客户端问题时，任何服务器端都不感兴趣。 – CBroe

服务器端没有任何关系。它纯粹是一个对齐问题，一些CSS问题。它只发生在Mozilla中。 – user1199842

另外你的按钮CSS有两个位置：绝对和浮动：正确;你不应该那样做。 –

你为什么不把按钮内部DIV。

将两个输入均向左浮动。如果你的容器div将被绝对定位，你还需要给容器div赋予宽度。

如果你需要文本/输入不可见，只是目标不是整个div。

来源

2013-11-04 11:33:32

太棒了！谢谢。 – user1199842

div在div中进入下一行Mozilla firefox后的元素

回答

相关问题