Question

我是网络开发的新手，我正在使用HTML和CSS在网站上工作。我的菜单有问题，我希望它与我的日志水平对齐，但它似乎是顶部对齐。

这是我的代码，请提出解决方案。

HTML：

<hgroup>
    <div id="Head">
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</hgroup>

CSS：

#Head {
    float:left;
    margin-left:120px;
    margin-right:150px;
    width:200px;
    height:150px;
}
/*------------------------*/
 #navcontainer {
    margin-top: 50px;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color:#000;
    font-size:18px;
}
#navcontainer ul li a:hover {
    color:#008c00;
}

Answer 1

您可以尝试类似

的内容

<div class="header_container">
  <div id="Head"> 
    <img src="img/logo.png" width="380" height="100" alt="Logo" /> 
   </div> 
   <div class="navcontainer">
      <div id="nav">
        <ul> 
           <li><a href="#">HOME</a></li> 
           <li><a href="#">ABOUT</a></li> 
           <li><a href="#">PROJECTS</a></li> 
           <li><a href="#">GALLERY</a></li> 
           <li><a href="#">CONTACT</a></li> 
        <ul> 
      </div> 
    </div>
</div>

CSS：

.header_container {
    position:relative;
}
#Head 
{ 
   margin-left:120px; 
   margin-right:150px; 
   width:200px; 
   height:150px; 
   background: red;
   float:left;
} 
/*------------------------*/ 
.navcontainer {
    position: relative;
    height:150px;
    float: left;
}
#nav { 
    background: green;
    position:absolute;
    bottom: 0;
    height: auto;
    width: 600px;
} 

#nav ul{ 
   margin: auto 0; 
   padding: 0; 
   list-style-type: none; 
   text-align: center;
   position: relative;
} 
#nav ul li { 
    position: relative;
    display: inline; 
    height: auto;
    bottom: 0;
    margin: auto 0;
} 
#nav ul li a{ 
    text-decoration: none; 
    padding: .2em 1em; 
    color:#000; 
    font-size:18px; 
} 
#nav ul li a:hover{ 
    color:#008c00; 
}

JSFiddle

但是......它并不是一个好的html / css。

我建议你学习Bootstrap framework。它可以帮助您构建一个好的CSS，而不需要太多的努力。

Answer 2

嗯，基于您提供的有限知识和缺乏图像来支持您的最终结果或目标，我提供了一个没有任何浮点数和硬编码维度的示例。这个例子所需要的就是使用display：table-cell;在这两个div容器上如下：

#Head 
{ 
  display: table-cell;
  height:150px; 
} 

#navcontainer{
  display: table-cell;
}

这是一个工作示例： http://plnkr.co/edit/NI2AXivXYKnXI2RJOnnh?p=preview

你想要完成的目标的清晰和更好的定义将有助于你更好地前进。

Answer 3

你的期望是这样吗？

https://www.facebook.com/photo.php?fbid=10204351601212725&l=ee54079c94

试试这个

<style>
hgroup{
    text-align:center;  
}

/*------------------------*/
 #navcontainer {
    margin-top: 50px;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;    
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color:#000;
    font-size:18px;
}
#navcontainer ul li a:hover {
    color:#008c00;
}</style>
<hgroup>
    <div id="Head" >
        <img src="img/logo.png" width="380" height="100" alt="Logo" />
    </div>
    <div id="navcontainer">
        <ul>
            <li><a href="#">HOME</a>
            </li>
            <li><a href="#">ABOUT</a>
            </li>
            <li><a href="#">PROJECTS</a>
            </li>
            <li><a href="#">GALLERY</a>
            </li>
            <li><a href="#">CONTACT</a>
            </li>
        </ul>
    </div>  
</hgroup>

底部对齐菜单与徽标？

3 个答案: