css - 请CSS帮助，2个对象拒绝留在同一行

Question

我很抱歉成为一个 CSS 菜鸟，并希望有人能引导我朝着正确的方向前进。

我需要帮助的网页可以在http://filefx.com找到

当您点击页面时，您会注意到“选择文件”图标和“上传文件”图标不在同一行。

“选择文件”图标实际上是一个覆盖真实的伪上传图标

现在，每当我尝试将两个图标放在一起时，“上传文件”图标就会被推送到下一次，我需要这两个对象位于同一行。

因此，如果有人可以建议一种方法来完成这项工作，你会让我成为一个快乐的露营者。

：） 谢谢

Answer 1

<div style="width:200px;">
<div style="width:98px;float:left;">Select files</div>
<div style="width:98px;float:left;">Upload files</div>
</div>

Answer 2

尝试：

<div style="float: left; width: 50%;">
select files
</div>
<div style="float: right; width: 50%;">
upload files
</div>

Answer 3

你需要设置：

.fakeupload 需要有一个宽度 ie 和 float:left

#file_picker_container 宽度：0；向左飘浮;

上传按钮周围的 div 宽度：40%；向左飘浮;

使用 firebug 打开页面并使用 CSS

Answer 4

我是这样做的：

上传按钮周围的 HTML，内联样式我改为：

<div style="position: absolute; right: 0pt; top: 0pt;">     <div id="upload_buttons_container">
        <!--<input type="image" SRC="templates/default/images/Flexshare-Reset.png" id="reset_button" name="reset_button" value="Reset" class="upload">-->
        &nbsp;&nbsp;&nbsp;
        <input type="image" class="upload" value="Upload" name="upload_bn" id="upload_button" src="images/uploadfiles.PNG">
      </div></div>

在 CSS 中，我做了以下更改：

.upload {
position:relative;
width:100%;
}

#upload_buttons_container {
width:300px;
}

form .fakeupload {
background:url("../images/selectfiles.PNG") no-repeat 100% 100% transparent;
height:75px;
width:300px;
}