我想将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

10-05 20:39
查看更多