Question

我尝试了很多方法，但它无法工作。标题上有两个div，标题左边是标识，标题右边是导航。所以，我必须漂浮它。但我仍然无法进入网站的中心。

这是我的代码

<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。

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

Answer 1

你能试试吗???

#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;
}

Answer 2

margin: 0 auto;仅在您定义了宽度时才有效，因此您应该为#header-center指定宽度：

例如：

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

浮动后剩余的中心为2个div

2 个答案: