gpt4 book ai didi

html - 使标题的图标在右侧 HTML/CSS 上对齐

转载 作者:太空宇宙 更新时间:2023-11-04 09:46:54 31 4
gpt4 key购买 nike

我的网站上有一个标题,右侧需要一些图标。我不知道该怎么做,因为图标位置正确,但 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/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com