剩余中心浮动2格后

我已经尝试了很多方法，但它不能工作。我在头上有两个div，因为头左边是徽标，头右边是导航。所以，我必须浮动它。但我仍然不能把它放到网站的中心。剩余中心浮动2格后

这是我的代码

<div id="header"> 
    <div id="header-center"> 
     <div id="headerleft"> 
      <h1> Hello </h1> 
      <p> caption </p> 
     </div> 

     <div id="headerright"> 
      <ul> 
       <li> <a href="index.php"> HOME </a> </li> 
       <li> <a href="work.php"> WORKS </a> </li> 
       <li> <a href="cv.php"> CV </a> </li> 
       <li> <a href="blog.php"> BLOG </a> </li> 
       <li> <a href="contact.php"> CONTACT </a> </li> 
      </ul> 
     </div> 
    </div> 
</div> 
</div>

这是我的CSS ..

#header { 
    height:100px; 
    border-bottom:2px solid grey; 
    background-color:#000; 
    color:#FFF; 
} 

#header-center { 
    margin:0 auto; 
} 

#headerleft { 
    float:left; 
} 

#header h1 { 
    padding:2px 15px; 
    font-size:30px; 
} 

#header p { 
    padding:2px 15px; 
    font-size:20px; 
} 

#headeright { 
    float:right; 
} 

#headerright ul li{ 
    float:left; 
    list-style:none; 
    margin:15px; 
} 


#menu li a { 
    font-size: 15px; 
    color:#FFF; 
    text-decoration:none; 
    float:left; 
} 

#menu li:hover a { 
    color:grey; 
}

需要明确的是，你可以在JSFIDDLE看看。

任何人都可以找到解决方案吗？谢谢

来源

2014-01-12 Anthosiastic

我不明白。你想要集中什么？你提到了左右浮动，但是什么元素需要居中？ –

＃header-center，我猜。 –

@MiheyEgoroff但是'header-center'包含左和右，所以我并不完全是预期的布局。 –

margin: 0 auto;只能如果您还定义了宽度，所以你应该给出#header-center宽度：

例如：

#header-center { 
    margin:0 auto; 
    width: 90%; 
}

来源

2014-01-12 17:05:43 bugovicsb

啊..我忘了把％..谢谢提醒！ – Anthosiastic

如果你设置display：table;该元素将采取保证金：0汽车;没有明确设定的宽度。但是，此解决方案会引入其他潜在问题，因此如果您可以设置宽度，请这样做。 –

你能试试吗？

#header { 
    height:100px; 
    border-bottom:2px solid grey; 
    background-color:#000; 
    color:#FFF; 
} 

#header-center { 
    margin:0 auto; 
} 

#headerleft { 
    float:left; 
} 

#header h1 { 
    padding:2px 15px; 
    font-size:30px; 
} 

#header p { 
    padding:2px 15px; 
    font-size:20px; 
} 

#headeright { 
    float:right; 
    width:500px; 

} 
#headerright ul{ 
margin:0 auto; width:500px; 
     padding: 35px; 
} 
#headerright ul li{ 

    list-style:none; 
    float: left; 
    width:100px; 



#menu li a { 
    font-size: 15px; 
    color:#FFF; 
    text-decoration:none; 
    float:left; 
} 

#menu li:hover a { 
    color:grey; 
}

来源

2014-01-12 17:02:32

剩余中心浮动2格后

回答

相关问题