Question

如何让导航栏显示在徽标旁边而不是突破到它下面的下一行？我尝试了几次更改，但它一直在下一行。我试图避免使用花车因为我被告知它们不好用。我希望它看起来像这个网站上的导航栏： http://www.freecsstemplates.org/

我想了解它是如何在该网站上完成的。

我对这个过程如何运作感到非常困惑。

CSS：

#header
{
background-image:url('menubg.png');
background-repeat:repeat-x;
}
#logo
{
display:inline-block;
}
#menu ul
{
display:inline-block;
list-style-type:none;
padding: 0px;
margin:0px;
}

#menu li
{
display:inline-block;
margin:0px;
padding:0px;
}

#menu a:link,a:visited
{
display:inline-block;
text-transform:lowercase;
width:auto;
font-weight:bold;
padding-left:47.5px;
padding-right:47.5px;
padding-top:9px;
padding-bottom:9px;
text-decoration:none;
color:#57fafc;
text-align:center;
background-color:#62d2d3;
}

#menu a:hover,a:active
{
background-color:#7ce5e6;
}

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<title>Blah</title></head>
<body>
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
      <ul>
        <li><a href="#">Home</a></li><li><a 

href="#">Contact</a></li><li><a href="#">About</a></li><li><a 

href="#">Products</a></li><li><a href="#">Design-a-Tee</a></li><li><a 

href="#">Reviews/Testimonials</a></li>
      </ul>
</div>
</div>
</body>
</html>

Answer 1

添加此css

#logo {
    float:left;
}
#menu {
    float:right;    
}
#header {
    clear: both;
    overflow: auto;
}

导航栏和徽标在同一条线上？

1 个答案: