我试着在这个iframe的底部放一个好看的全屏图标，但是它所在的div(为了方便，背景是绿色的)在父div的中间。HTML:
<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">
<b><p class="logo-options">Skool</p></b>
<div class="icons-options">
<i class="fa-solid fa-expand" style="color: #ffffff;"></i>
</div>
</div>
<script src="script.js"></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: 0.5vw solid black;
border-left: 0.5vw solid black;
border-right: 0.5vw solid black;
border-radius: 1vw 1vw 0px 0px;
}
#game-options{
max-width: 75%;
margin: 0 auto;
border: 0.5vw solid black;
display: block;
border-radius: 0px 0px 1vw 1vw;
color: #ffffff;
background-color: #000000;
}
.logo-options{
padding-left: 15px;
}
.icons-options{
padding-right: 15px;
margin: 0;
display: inline-block;
float: right;
background-color: #00FF00;
}
怎么了?
如果您希望这两个元素在同一行，那么您应该将它们都设置为display: inline-block。
#game-options > b {
display: inline-block;
}
但是，您可能需要考虑使用flexx。在这种情况下，您可以删除display和float属性，然后添加以下内容:
#game-options{
/ * other properties */
display: flex;
justify-content: space-between;
}