导航栏对齐最小宽度CSS

Question

Hello Id like Some help with getting my navbar to properly scale (EX. Min-width 800px???). 您好，我想获得一些帮助，以使我的导航栏正确缩放（例如，最小宽度800px ???）。 Also I'm not sure if i have the phone number div set up properly but id like to have some space in between the phone number and the links in the navbar. 另外我不确定我是否正确设置了电话号码div，但id喜欢在电话号码和导航栏中的链接之间留一些空间。 this is my first attempt at something like this so any help would be appreciated, thank you. 这是我第一次尝试这样的事情，因此，感谢您的任何帮助。

css 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

Corrected the code Please check it satisfy you needs. 更正了代码，请检查它是否满足您的需求。

CSS 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 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 个解决方案

解决方案1
0 2013-12-13 09:17:05

导航栏对齐最小宽度CSS

问题描述

1 个解决方案

解决方案1 0 2013-12-13 09:17:05

解决方案1
0 2013-12-13 09:17:05