Question

Hello Id喜欢有些帮助让我的导航栏正确缩放（EX。最小宽度800px ???）。此外，我不确定我是否正确设置了电话号码div，但我想在电话号码和导航栏中的链接之间留出一些空间。这是我第一次尝试这样的事情，所以任何帮助都会受到赞赏，谢谢。

CSS

<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
#navbar { 
background:#212221 repeat-x; 
height:25px; 
color:#FFF;
padding:px 0px 0px 20px;  
}
#nav {
background:#212221 repeat-x; 
width: auto;
float: left;
font-size:14px;
font-family:GeosansLight;
margin: 0 0 3em 0px;
margin-left:500px;
padding: 0;
list-style: none;
min-width:700px;
}
#nav li {
float: left; 
    }
#nav li a {
    display: block;
    padding: 3px 10px;
    text-decoration: none;
    color: #fff;
}
#nav li a:hover {
text-decoration: underline; 
color:#FFF;}
#number {
background:#212221 repeat-x; 
width: auto;
float:left;
font-size:16px;
font-family:GeosansLight;
margin: 0 0 3em 0px;
margin-top:3px;
margin-left:200px;
padding:0;
list-style: none;
 }

#number li {
float: left; 
    }
#number a {
    display: block;
    padding: 0px 10px;
    text-decoration: none;
    color: #fff;
}
#header { 
background:#FFF repeat-x; 
height:80px; 
color:#FFF;
padding:0px 0px 0px 0px;  
}

</style>

HTML

<body>
<div id="navbar">
<ul id="nav">
<li><a href="/index.html">HOME</a></li>
<li><a href="/about.html">ABOUT US</a></li>
<li><a href="/gallery.html">GALLERY</a></li>
<li><a href="/faq.html">FAQs</a></li>
<li><a href="/contact.html">CONTACT</a></li>
</ul>
<div id="number">
<a>951-226-5620</a>
</div>
<div class="header">
<img src="images/kingstudlogo.png"/>
</div>
</body>

Answer 1

更正了代码请检查它是否满足您的需求。

CSS

html, body {
    margin: 0;
    padding: 0;
}
#navbar {
    background: none repeat-x scroll 0 0 #212221;
    color: #FFFFFF;
    height: 25px;
}
#nav {
    background: none repeat-x scroll 0 0 #212221;
    float: left;
    font-family: GeosansLight;
    font-size: 14px;
    list-style: none outside none;
    margin: 0 0 0 319px;
    min-width: 481px;
    padding: 0;
    width: auto;
}
#nav li {
    float: left;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    padding: 3px 10px;
    text-decoration: none;
}
#nav li a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
#number {
    background: none repeat-x scroll 0 0 #212221;
    float: left;
    font-family: GeosansLight;
    font-size: 16px;
    list-style: none outside none;
    margin: 3px 0 0 200px;
    padding: 0;
    width: auto;
}
#number li {
    float: left;
}
#number a {
    color: #FFFFFF;
    display: block;
    padding: 0 10px;
    text-decoration: none;
}
.header {
    background: none repeat-x scroll 0 0 #FFFFFF;
    color: #FFFFFF;
    height: 80px;
    padding: 0 0 0 330px;
}

HTML

<div id="navbar">
    <ul id="nav">
        <li><a href="/index.html">HOME</a></li>
        <li><a href="/about.html">ABOUT US</a></li>
        <li><a href="/gallery.html">GALLERY</a></li>
        <li><a href="/faq.html">FAQs</a></li>
        <li><a href="/contact.html">CONTACT</a></li>
    </ul>
    <div id="number">
        <a>951-226-5620</a>
    </div>
</div>
<div class="header">
    <img src="images/kingstudlogo.png"/>
</div>

导航栏对齐最小宽度CSS

1 个答案: