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;
}

CSS帮助请，2个对象拒绝保持在同一行

4 个答案: