2016-03-14 57 views
1

我有一个固定的页脚在底部。设置中间和旁边的精灵文本

我想要我的文本开发人员在右侧和中间的精灵旁边。

尝试了很多东西,但只有我想出来的是:在精灵或文本顶部的文本到最左边的浮动。尝试绝对和相对的位置,但没有得到我想要的。

这里是目前的代码:

CSS:

#sticky { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    padding:5px 0; 
    width:100%; 
    background:#0277a8; 
    color:white; 
    border-top:10px solid black; 
    text-align:center; 
} 

.izstradatajs { 
    float:left; 
} 

/* Spriti */ 

ul#social-networking{ 
    margin:0px 0 0 0; 
    text-align:center; 
    display:block; 
    padding:0px 0px 0px 0px; 
    font-size:12px; 

} 
#social-networking li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background: url(../images/spriti.jpg) no-repeat; 
} 
#social-networking li, #social-networking a { 
    width: 54px; 
    height: 54px; 
    display: inline-block; 
} 
ul#social-networking li.twitter {background-position: -69px -13px;} 
ul#social-networking li.facebook {background-position: -3px -10px;} 
ul#social-networking li.rss {background-position: -130px -10px;} 

ul#social-networking li:hover.twitter {background-position: -69px -87px;} 
ul#social-networking li:hover.facebook {background-position: -3px -87px;} 
ul#social-networking li:hover.rss {background-position: -130px -87px;} 

HTML:

<footer id="sticky"> 
    <div class="izstradatajs">Izstrādātājs: Roberts</div> 
    <ul id="social-networking"> 
     <li class="twitter"><a href="#"></a></li> 
     <li class="facebook"> <a href="#"></a></li> 
     <li class="rss"> <a href="#"></a></li> 
    </ul> 
</footer> 

回答

0

为什么不开发作为一个列表项?

<footer id="sticky"> 
    <ul id="social-networking"> 
     <li class="twitter"><a href="#">TW</a></li> 
     <li class="facebook"> <a href="#">FB</a></li> 
     <li class="rss"> <a href="#">RSS</a></li> 
     <li><div class="izstradatajs">Izstrādātājs: Roberts</div></li> 
    </ul> 
</footer> 

而且

.izstradatajs { 
    text-align: left; 
    width: 200px; 
}