Question

我正在尝试制作一个悬浮在屏幕顶部的浮动菜单，并且可以点击一些图标，其中大部分都会提交表单。尽管如此，filechoosebutton是通过css隐藏的，但即使它没有渲染，它仍然会导致我的下载按钮在屏幕外消失。我该如何解决这个问题？

感谢您提供任何线索

这是菜单的html

<div id='floating_menu'>
    <table >
        <tr>
            <td >
                <form action='' method='post' id='trash1' >
                    <img src='http://s27.postimg.org/jua3mu9q9/trash.jpg' width="35" height="45" alt='delete' />
                </form>
            </td>
            <td >
                <img id='storagebutton' src='http://i60.tinypic.com/2igya9d.jpg' width="35" height="45" alt='storage' />
            </td>
            <td >
                <form id="uploadtsvform" enctype="multipart/form-data" method="post" action="">
                    <input id="filechoosebutton" name="uploadFile" type="file" onchange="this.form.submit()" />
                    <img id='uploadbutton' onClick='chooseFile()' src='http://oi59.tinypic.com/2lm0yky.jpg' width="35" height="45" alt='upload tsv' />
                </form>
            </td>
            <td >
                <img id='downloadbutton' src='http://i62.tinypic.com/zu4n03.jpg' width="35" height="45" alt='download tsv' />
            </td>
        </tr>
    </table>
</div>

这是创建浮动菜单的css

#floating_menu {
    background:white;
    width:250px;
    height:25px;
    position:fixed;
    top:10px;
    right:0;
}

这是隐藏常用浏览上传按钮

的CSS

#filechoosebutton {
    height:0px;
    width:0px;
    overflow:hidden;
}

这是Fiddle

Answer 1

你的形式正在占用下载按钮的空间。尝试添加

#uploadtsvform {
  display: inline-block;
  width: 50px;
}

隐藏的浏览按钮弄乱了我的桌子

1 个答案: