我的网站上有一个标题，右侧需要一些图标。我不知道该怎么做，因为图标位置正确，但 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;
}
编辑:这段代码是我正在努力解决问题的工作，忽略任何愚蠢的错误
最佳答案
绝对定位元素从流中移除。它们的高度、填充或边距不会以任何方式影响它们的父级。
要使您的父元素 #socialMediaHeader 可见，您需要为其定义高度。
#socialMediaHeader {
background-color: black;
position: relative;
height: 50px;
}
另外，请注意 position:relative。
绝对定位总是寻找最近的定位祖先。这可确保您的图标始终位于 #socialMediaHeader 内。
关于html - 使标题的图标在右侧 HTML/CSS 上对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39423025/