Question

我的网站上有一个标题，右侧需要一些图标。我不知道该怎么办，因为图标定位正确但div没有扩展到它们，这应该是默认行为。

这是HTML：

<!DOCTYPE html>
<html>
<head>

    <title>Kingdom Hearts 358/2 Days HD</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">

</head>
<body>

    <div id = "socialMediaHeader">

        <div id = "socialMediaIcons">
            <a href = "http://twitter.com/kh_days_hd"><img class = "socialMediaIcon" src = "twitter_icon.png"></a>

            <a href = "https://www.youtube.com/channel/UC4mVq6c8YpYOuiTwuzejgDw"><img class = "socialMediaIcon" src = "youtube_icon.png"></a>
        </div>

    </div>

</body>
</html>

这是CSS：

* {
    margin: 0;
    padding: 0; 
}

#socialMediaHeader {
    background-color: black;
}

.socialMediaIcon {
    margin: 10px;
}

#socialMediaIcons {
    position: absolute;
    right: 0px;
}

#socialMediaIcons::after {
    content : "";
    display : block;
    clear : both;
}

编辑：这段代码是我正在尝试修复问题的工作，无视任何愚蠢的错误

Answer 1

绝对定位元素将从流中移除。他们的身高，填充或边距不会以任何方式影响他们的父母。

要使您的父元素 #socialMediaHeader 可见，您需要在其上定义高度。

#socialMediaHeader {
    background-color: black;
    position: relative;
    height: 50px;
}

另请注意position:relative。绝对定位始终寻找最近的定位祖先。这可确保您的图标始终位于#socialMediaHeader内。

Answer 2

为您的socialmediaheader提供100％的宽度，X的高度和相对位置

Platform.runLater(new Runnable(){
// place the code here, that you want to execute
});

工作小提琴：https://jsfiddle.net/6h21kncg/4/

对不起它有点难看，带我去吃早餐结束后正确地读了你的问题 - 请原谅我，但我现在正在打电话......

Answer 3

你正在使用position：absolute，这会从socialMediaHeader中取出socialMediaIcons div，所以这个div中没有任何东西。你需要给它一个高度。

使标题与右侧HTML / CSS上的图标对齐

3 个答案: