我想将UL放在标题的中心,但它们会自行定位。我想到使用溢出,但另一个问题中发布的解决方案没有溢出。 http://codepen.io/anon/pen/jyubq
这是CSS:
#header ul {
display: inline-block;}
#header {
z-index: 1;
position:fixed;
background-color: #668284;
width: 99.5%;
height: 60px;
margin-top: -10px;
margin-bottom: 5px;}
#header ul li {
width:48px;
height:48px;
margin-left:15px;
margin-top: 5px;
display:inline-block;
background-color:#000000;
padding:0;
text-align: center;}
#google{
width:48px;
height:48px;
background-image:url('images/googleplus.png');
display:block;}
#facebook{
width:48px;
height:48px;
background-image:url('images/facebook.png');
display:block;}
#twitter{
width:48px;
height:48px;
background-image:url('images/twitter.png');
display:block;}
#header ul li#google{
background-color:#d34836;
transition:background-color;
transition-duration:0.17s;}
#header ul li#google:hover{
background-color:#c23725;}
#header ul li#facebook{
background-color:#3b5998;
transition:background-color;
transition-duration:0.17s;}
#header ul li#facebook:hover{
background-color:#2a4887;}
#header ul li#twitter{
background-color:#4099ff;
transition:background-color;
transition-duration:0.17s;}
#header ul li#twitter:hover{
background-color:#3188ee;}
#name {
float: left;
font-size: 20px;
padding-top: 5px;
margin-left: 5px;}
#email {
float: right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;}
这是HTML部分:
<div id="header">
<p id="name">Your Name Here</p>
<a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a>
<ul>
<li id="facebook"><a id="facebook" href="#"></a></li>
<li id="google"><a id="google" href="#"></a></li>
<li id="twitter"><a id="twitter" href="#"></a></li>
</ul>
</div>
最佳答案
该代码将修复
#header ul {
margin:0 auto;
text-align:center;
}
码笔链接
http://codepen.io/anon/pen/ivjfD