gpt4 book ai didi

html - CSS类背景图片水平定位?

转载 作者:太空狗 更新时间:2023-10-29 15:38:40 25 4
gpt4 key购买 nike

<分区>

所以我试图将 facebook/youtube/twitter 按钮放置在 318 像素宽的 div 上(因此每个按钮大约 106 像素)。

预期输出

expected layout
(来源:iforce.co.nz)

我在渲染每个按钮时使用 float 和显示:内联。我在下面提供了我的代码。

CSS 代码

#socialController{
width: 318px;
background-color:#fff;
display: inline;
}
.socialmedia
{
width:106px;
height:20px;
float:left;
vertical-align:middle;
background-position:center center;
background-repeat:no-repeat;
background-color:#373737;
}
.socialmedia:hover{
background-color:#444
}
#sm_fb{
background-image:url(../img/fb.png)
}
#sm_tw{
background-image:url(../img/tw.png)
}
#sm_yt{
background-image:url(../img/yt.png)
}

HTML 代码

<div id="socialController">
<a href="#" class="socialmedia" id="sm_fb" title="CSGONZ Facebook"></a>
<a href="#" class="socialmedia" id="sm_yt" title="CSGONZ Youtube"></a>
<a href="#" class="socialmedia" id="sm_tw" title="CSGONZ Twitter"></a>
</div>

但问题是我没有达到预期的水平定位..而是我得到了按钮的垂直定位。

实际输出

actual output
(来源:iforce.co.nz)

问题是什么?我错过了什么?实现水平布局?

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