CSS: 导航栏

Question

为我的公司建立一个网站，第一个。而且我无法将导航栏水平放置并放置在浏览器的右上角。

整个顶部部分是一个 <div>（类似于 StackExchange 站点），我目前有三个元素浮动到左上角（logo、name、tagline).

我试图让导航栏水平并向右浮动，但我找不到它。它一直出现在黑色条的外面，在左边三个浮动元素的下面。

HTML代码：

    <div class="part1 header">
            <div class="headcontain">
                <a href="http://www.se7enservice.com">

                    <div class="logo"><img src="/Images/7serviceLOGOblue2.png"/></div>
                    <div class="headtag"><img src="/Images/title.png"</div>
                    <div class="tagline"><img src="/Images/tag_line.png"/></div>
                </a>

              <!--  <div class="bif">
                    <div class="bif2">
                        <div id="p1" class="block"></div>
                        <div id="p2" class="block"></div>
                    </div>
                </div> -->

                <ul class="navi">

                    <li><a href='http://www.se7enservice.com/' class="here">Home</a></li>

                    <li><a href="/about.html" >About</a></li>

                    <li><a href="/services.html" >Services</a></li>

                    <li><a href="/pricing.html" >Pricing</a></li>

                    <li><a href="/contact_us.html" >Contact Us</a></li>

                </ul>
            </div>
        </div>

CSS 三个左侧浮动元素和到目前为止的导航代码：

.part1 {
  width: 100%;
  float: left;
  background: #000;
  position: fixed;
  z-indez: 9999;
  height: 60px;
  top: 0px;
}
.logo {
  width: 50px;
  height: 50px;
  float: left;
  overflow: visible
}
.logo img {
  width: 100%;
  padding: 1.5px
}
.headtag {
  padding: 0px 10px;
  width: 215px;
  float: left
}
.headtag img {
  width: 100%;
  height: 50px
}
.tagline {
  width: 220px;
  float: left;
  margin: -50px 0px 0px 220px;
}
.tagline img {
  width: 100%
}
navi {
  list-style: none;
  float: right;
  margin: 0px;
  margin-left: 25px;
  padding: 0px
}
.navi li {
  display: block;
  position: relative;
  float: left;
  margin: 0px 5px;
  overflow: hidden;
}

如有任何帮助，我们将不胜感激。这完全令人沮丧。如果您想参考我正在尝试做的事情，请参阅 http://johnnycupcakes.com/。

Answer 1

行 <div class="headtag"><img src="/Images/title.png"</div> 必须更改为

<div class="headtag"><img src="/Images/title.png"/></div>你忘记关闭图片标签了。

除此之外，将您的 css 更改为以下内容：

.part1{
width: 100%;
float: left;
background: #000;
position: fixed;
z-indez: 9999;
height: 60px;
top: 0px;
}
.logo,.headtag,.tagline{ 
    display:inline-block;
    background-color:green;
}
.logo {
width: 50px;
height: 50px;
float: right;
overflow: visible;
}

.logo img {
width: 100%;
padding: 1.5px
}

.headtag {
padding: 0px 10px;
width: 215px;
float: right;
}

.headtag img {
width: 100%;
}

.tagline {
width: 220px;
float: right;
}

.tagline img {
width: 100%
}

navi {
list-style: none;
float: right;
margin: 0px;
margin-left: 25px;
padding: 0px
}

.navi li{
display: block;
position: relative;
float: left;
margin: 0px 5px;
overflow: hidden;
}

看看this fiddle

Answer 2

设置您的 li 样式，使其成为 display:inline;。他们会并肩而坐。您还需要删除 li;

上的 float:left

.navi li{
display: block;
position: relative;
/*float: left;*/
margin: 0px 5px;
overflow: hidden;
display:inline;
}

您还缺少 img;

上的结束标记

 <div class="part1 header">
            <div class="headcontain">
                <a href="http://www.se7enservice.com">

                    <div class="logo"><img src="/Images/7serviceLOGOblue2.png"/></div>
                    <div class="headtag"><img src="/Images/title.png"/></div><!--Closed image tag-->
                    <div class="tagline"><img src="/Images/tag_line.png"/></div>
                </a>

Answer 3

这应该可以解决问题...让我知道这是否是您要找的。

//HTML

<!DOCTYPE html>
<html>
<head>
    <link href="index.css" rel="stylesheet">
</head>
<body>
    <nav>
        <div>
            <div id="logo">LOGO</div>
        </div>
        <div> 
            <a href='http://www.se7enservice.com/' class="here">Home</a>
            <a href="/about.html" >About</a>      
            <a href="/services.html" >Services</a>          
            <a href="/pricing.html" >Pricing</a>    
            <a href="/contact_us.html" >Contact Us</a>      
        </div>
        <div>
            <a href="">Sign Up</a>
            <a href="">Sign In</a>
        </div>
    </nav>
    <section id="content"></section>
    <footer></footer>
</body>
</html>

//CSS

body{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    margin: 0 !important;
    height: 100vh;
    width: 100vw;

    overflow: scroll;

}

nav{
    display: -webkit-flex;
    display: flex;

    width: 100%;
    min-height: 60px;

    z-index: 999;
    position: fixed;
    background: #1E67CB;

    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
    text-align: center;

    -webkit-flex: 1;
    flex: 1;

    -webkit-align-self: center;
    align-self: center; 
}
#logo{
    display: -webkit-flex;
    display: flex;
    cursor: default;
    -webkit-align-self: center;
    align-self: center;

    margin-left: 1em;

    color: #fff;
    font-weight: bold;
    font-size: 1.15em;
    line-height: 1.43;  
    -webkit-font-smoothing: antialiased;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
    width: 50vw;    
    display: -webkit-flex;
    display: flex;
}
nav>div:nth-of-type(1){
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
nav>div:nth-of-type(2){
    -webkit-justify-content: center;
    justify-content: center;
}
nav>div:nth-of-type(3){
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

nav>div>a{
    display: -webkit-flex;
    display: flex;

    -webkit-align-self: center;
    align-self: center;

    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;

    margin: 0 .5em;
    padding: 0.6em 1.5em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-transition: background-color 100ms;
    -webkit-transition: background-color 100ms;
    transition: background-color 100ms;
}
nav>div>a:hover{
     background: rgba(255,255,255,0.15);
}
nav>div>a:active{
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div:nth-of-type(3)>a:nth-of-type(2){
    background: rgba(255, 255, 255, 0.15);  
}
nav>div>a:nth-of-type(2):hover{
    background: rgba(255, 255, 255, 0.37);  
}
#content{
    display: -webkit-flex;
    display: flex;

    width: 100%;
    min-height: 200vh;
}
footer{
    display: -webkit-flex;
    display: flex;

    width: 100%;
    min-height: 100px;
    bottom: 0;

    background: #5c5c5c;

    box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6); 
}

CSS: 导航栏

CSS: Navigation Bar

html

javascript

css

navigation

jquery