剩餘中心浮動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格後

回答

相關問題