无法在div标签内添加按钮

问题描述 投票：0回答：1

我正在尝试在我的社交链接 div 标签上添加一个按钮，但无论我做什么，该按钮都不会显示在 div 标签上。

如您所见，按钮位于父 div 标签内，但显示得太靠下了。我怎样才能将它移动到div标签内。

这是我的代码：

    <!DOCTYPE html>
    <html>
    <style>
        
    html,body,#container {
        background-color: rgb(230,230,230);
        margin:0px;
        padding:0px;
    }
    
    #container {
        position: relative;
    }
    
    #spaceBox {
        background-color: rgba(0,0,0,0.0);
        width: 80%;
        max-width: 800px;
        height: 30px;
        top:0px; bottom:0px; left:0px; right:0px;
        margin: auto;
        border-radius: 25px;
    }
    
    #socialLinksContainerBox {
        background-color: white;
        width: 80%;
        max-width: 800px;
        height: 125px;
        top:0px; bottom:0px; left:0px; right:0px;
        margin: auto;
        border-radius: 25px;
        text-align: center;
        overflow:hidden;
        white-space: nowrap;
    }
    
    #socialLinksMiniBox {
        background-color: rgb(240,240,240);
        width: calc(100% / 7);  
        height: 43%;
        display: inline-block;
        vertical-align: top;   
        text-align:center;
        margin:2%;    
        padding:20px;
        border-radius: 25px;
    }
    
    #socialLogo {
        width: 40px;
        height: 40px;
    }
    
    #socialLabel {
        position: relative;
        width: 100%;
        height: 40px;
        font-size: 15px;
        font-family: 'HelveticaNeue';
        bottom: 12px;
        text-align: center;
    }
    
    #socialButtonOne {
        position: relative;
        width: 100%;
        height: 100%;
        margin: auto;
        top:0px; bottom:0px; left:0px; right:0px;
        z-index: 100;
        display: block;
    }
    
    </style>
    
    <head>
      <title>MyCircle</title>
    </head>
    <body>
    <div id="container">
        <div id="spaceBox"></div>
        <div id="socialLinksContainerBox">
            <div id="socialLinksMiniBox">
                <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/instagram.png">
                <p id="socialLabel">Instagram</p>
                <button id="socialButtonOne" type="button" onclick="alert('Hello world!')">Click Me!</button>
            </div>
            <div id="socialLinksMiniBox">
                <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/youtube.png">
                <p id="socialLabel">YouTube</p>
            </div>
            <div id="socialLinksMiniBox">
                <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/x.png">
                <p id="socialLabel">X</p>
            </div>
            <div id="socialLinksMiniBox">
                <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/tiktok.png">
                <p id="socialLabel">TikTok</p>
            </div>
        </div>
    </div>
    </body>
    </html>

html css button
1个回答
0
投票

它使用相对定位，但没有以任何有意义的方式。它基本上是同一 

<div>
中其他元素流的一部分，并且位于它们“下方”并溢出到 
<div>
下方。

您可以将 

<div>
更改为使用相对定位，然后将按钮更改为使用绝对定位：

html,body,#container {
    background-color: rgb(230,230,230);
    margin:0px;
    padding:0px;
}

#container {
    position: relative;
}

#spaceBox {
    background-color: rgba(0,0,0,0.0);
    width: 80%;
    max-width: 800px;
    height: 30px;
    top:0px; bottom:0px; left:0px; right:0px;
    margin: auto;
    border-radius: 25px;
}

#socialLinksContainerBox {
    background-color: white;
    width: 80%;
    max-width: 800px;
    height: 125px;
    top:0px; bottom:0px; left:0px; right:0px;
    margin: auto;
    border-radius: 25px;
    text-align: center;
    overflow:hidden;
    white-space: nowrap;
}

#socialLinksMiniBox {
    background-color: rgb(240,240,240);
    width: calc(100% / 7);  
    height: 43%;
    display: inline-block;
    vertical-align: top;   
    text-align:center;
    margin:2%;    
    padding:20px;
    border-radius: 25px;
    position: relative; /* <--- here */
}

#socialLogo {
    width: 40px;
    height: 40px;
}

#socialLabel {
    position: relative;
    width: 100%;
    height: 40px;
    font-size: 15px;
    font-family: 'HelveticaNeue';
    bottom: 12px;
    text-align: center;
}

#socialButtonOne {
    position: absolute; /* <--- and here */
    width: 100%;
    height: 100%;
    margin: auto;
    top:0px; bottom:0px; left:0px; right:0px;
    z-index: 100;
    display: block;
}
<div id="container">
    <div id="spaceBox"></div>
    <div id="socialLinksContainerBox">
        <div id="socialLinksMiniBox">
            <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/instagram.png">
            <p id="socialLabel">Instagram</p>
            <button id="socialButtonOne" type="button" onclick="alert('Hello world!')">Click Me!</button>
        </div>
        <div id="socialLinksMiniBox">
            <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/youtube.png">
            <p id="socialLabel">YouTube</p>
        </div>
        <div id="socialLinksMiniBox">
            <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/x.png">
            <p id="socialLabel">X</p>
        </div>
        <div id="socialLinksMiniBox">
            <img id="socialLogo" src="https://my-circle.io/OtherFiles/SocialLogos/tiktok.png">
            <p id="socialLabel">TikTok</p>
        </div>
    </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.