我可能只是累了，没有注意，但我似乎无法看到这个图标旁边的文字说"未能加载游戏"。我尝试了互联网上所有的解决方案，但都无济于事。为了方便起见，我用绿色高亮了这个分节。输出:polarisiframestyling.forstaken.repl.co
代码:
<html>
<head>
<title>funnies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/204c1cf7c6.js" crossorigin="anonymous"></script>
</head>
<body>
<iframe id="game-frame" scrolling="no" frameborder="0" width="75%" height="80%" cellspacing="0" src="https://example.com"></iframe>
<div id="game-options">
<div class="game-name-icon">
<b><img src="https://via.placeholder.com/20x20?text=img" id="game-icon-sm" width="20" height="20"><p class="logo-options" id="logo-options">Failed to load game</p></b>
</div>
<div class="icons-options">
<p><a href="#" style="padding-right: 10px;">
<i class="fa-solid fa-heart" style="color: #ffffff;"></i></a>
<a href="#">
<i class="fa-solid fa-expand" style="color: #ffffff;" onclick="fullscreen()"></i></a>
</p>
</div>
</div>
<script src="fullscreen.js"></script>
<script src="setdata.js"></script>
<script>
const myClass = document.querySelector('.fa-heart');
function favorite() {
if (myClass.style.color === 'rgb(255, 255, 255)' || myClass.style.color === '') {
myClass.style.color = '#c72e47';
} else {
myClass.style.color = '#ffffff';
}
}
myClass.addEventListener('click', favorite);
</script>
</body>
</html>
CSS:
body, html {
height: 100%;
width: 100%;
font-family: Arial;
}
p{
margin: 0;
}
#game-frame{
margin: 0 auto;
display: block;
border-top: 6px solid black;
border-left: 6px solid black;
border-right: 6px solid black;
border-radius: 13px 13px 0px 0px;
}
#game-options{
max-width: 75%;
margin: 0 auto;
border: 6px solid black;
display: flex;
justify-content: space-between;
border-radius: 0px 0px 13px 13px;
color: #ffffff;
background-color: #000000;
}
#game-options > b {
display: inline-block;
}
.icons-options{
padding-right: 15px;
padding-top: 2px;
margin: 0;
display: inline-block;
float: right;
}
.game-name-icon{
display: flex;
align-items: center;
justify-content: center;
background-color: #00FF00;
}
这是因为文本在一个段落(<p>)中，默认显示为'block'，这意味着，默认情况下，该文本将低于它之前的任何内容。保持图像在同一行的一种方法是添加display:inline-block;作为该段的css样式。另一种方法是将图片放在该段中。