1

谁能帮我垂直对齐这个div，我想secondDiv在下面firstDiv。我看到了很多帖子但无法解决它任何人都可以更改我的代码来工作。

<div>
    <div style="position:relative;width:800px;margin:0;padding:0">
        <div id="firstDiv" style="text-align:center;position:absolute;margin-top:0">
            <div>
                <span>
                    <input type="submit" title="" value="Select Photos From Your Computer"
                    name="sendBtn">
                </span>
            </div>
            <div style="width:492px;height:20px;position:absolute;top:8px;overflow:hidden;z-index:100">
                <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
                    <input type="file" style="opacity:0;font-size:20px;" accept="image/*"
                    name="d" id="d">
                </form>
            </div>
        </div>
        <div id="secondDiv" style="text-align:center;margin:3px 0 12px;">
            <span>You can add upto</span>
            <span style="font-weight:bold">3 Photos</span>
        </div>
    </div>
</div>
4

4 回答 4

2

从 firstDiv 的样式属性中删除“位置：绝对”，它似乎回答了你的问题。

这也会导致事物四处移动。所以你需要准确地描述你想要什么。

您应该避免使用 position:absolute 和 position:fixed ，除非您正在做一些花哨的事情（例如，菜单栏或窗口中的弹出窗口）。所以删除所有“位置：...”的东西以及“顶部：...”。

为什么中间有那个 opacity 0 文件输入？如果您希望它隐藏并删除空白空间，请将其更改为“display：none”（并取消隐藏：“display：block”（如 div）或“display：inline”（如 span））

在这里，将不透明度更改为显示，并删除了所有定位内容（顶部：、位置：等）。

<html>
<head>
<style>
</style>
</head>
<body>
    <div>
        <div style="width: 800px; margin: 0px; padding: 0px">   
            <div id="firstDiv" style="text-align: center; margin-top: 0">
                <div>
                    <span>
                        <input type="submit" title="" value="Select Photos From Your Computer" name="sendBtn" />
                    </span>
                </div>
                <div style="width:492px; height:20px; overflow:hidden; z-index:100">
                    <form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
                        <input type="file" style="display: none; font-size:20px;" accept="image/*" name="d" id="d" />
                    </form>
                </div>
            </div>
            <div id="secondDiv" style="text-align: center; margin: 3px 0 12px;">
                You can add up to
                <span style="font-weight:bold">3 Photos</span>
            </div>   
        </div>
    </div>
</body>
</html>

在阅读您对其他答案的评论后，试试这个：http ://www.quirksmode.org/dom/inputfile.html http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-输入类型文件

于 2012-04-18T10:08:02.553 回答
0

如果您position: absolute;从其中删除firstDiv它将起作用...请参阅此处以获取示例

于 2012-04-18T09:58:46.053 回答
0

删除position:absolute;_firstdiv

于 2012-04-18T09:58:53.027 回答
0

在 div 中改变了

>  <div id="firstDiv" style="text-align:center;margin-top:0;">

你会得到这样的输出

在此处输入图像描述

于 2012-04-18T10:00:05.133 回答