Div和Class元素不响应CSS自定义

时间:2015-12-18 21:30:25

标签: html css blogger

我想帮助我正在尝试为我的博客底部编码的版权声明。我已经涵盖了基础知识,除了两个小方面之外,我想要的一切看起来都很难解决。

我遇到的第一个问题是,左侧显示的“©2015 Blankesque。保留所有权利。使用条款”声明有点远远超出我的意愿。我已经尝试了以下一段css编码来解决问题,但无济于事:

.copyright {
top: 10px;
}

理想情况下,我希望文本位于中间,与社交媒体图标一致。

我面临的第二个问题是右侧的社交图标。我希望图标略微向左。我尝试了以下css编码来解决问题,但无济于事:

#socialmediabuttons {
padding-right: 3%;
}

我在下面列出了整个css和html编码。我博客的网址如下:http://www.blankesque.com

<style>
.copyright {
background: #f8f8f8;
padding: 1% 0 1% 2%;
margin-bottom: -35px;
font-weight: normal!important;
letter-spacing: 0.09em;
overflow: hidden;
font-family: karla, helvetica!important;
font-size: 9px!important;
color: #333333!important;
text-transform: uppercase!important;
}
</style>

<h3 class='copyright'>&#169;  2015 Blankesque . All rights reserved . <a href='http://www.blankesque.com/p/terms-and-conditions.html' style='font-weight:normal!important;'>Terms Of Use</a>

<style>
#socialmediabuttons {
display: block;
text-align: right;
}
#socialmediabuttons a {
padding: 0px 10px;
}
#socialmediabuttons a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}

</style>
<div id="socialmediabuttons"> 

<a href='https://www.pinterest.com/blankesque' target='_blank'><img alt='Pinterest' height="20px" width="20px" src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C633D0E8-96C1-4A46-95F3-900760AD135D_zpsigupftnl.jpg'/>
</a>

<a href='https://www.twitter.com/itsblankesque' target='_blank'><img alt='Twitter' height="20px" width= "20px" src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/A036F9A7-1B42-42A6-9DF4-29FE498F231D_zpshfhfvks2.jpg'/></a>

<a href='http://www.bloglovin.com/people/aladyinwhite-8315551' target='_blank'><img alt='Bloglovin'  height="20px" width= "20px" src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/9C819F2F-9B87-4942-BF00-7CB8217E85FE_zpsf0tdks5d.jpg'/></a>

<a href='https://Instagram.com/itsblankesque' target='_blank'><img alt='Instagram' height='20px' width='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/0396D9B2-5B1D-47D3-8D95-826663933DA9_zpsw2tay8h2.jpg'/></a>

<a href='mailto: blankesque@hotmail.com' target='_blank'><img alt='Email' height="20px" width= "20px" src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/45AA973D-D8A1-4FAE-A31A-138DA7CB8443_zpsteklwczz.jpg'/></a>
</div>
</h3><div><br/></div><div><br/></div>

1 个答案:

答案 0 :(得分:0)

如果您将text-align: right样式中的float:right更改为#socialmediabuttons,并在line-height:20px样式上设置.copyright,那么您将获得所需效果