堆栈内存溢出
  繁体   English   中英

CSS：导航栏

[英]CSS: Navigation Bar

 原文  2015-08-04 00:28:16  0   3    javascript/ jquery/ html/ css/ navigation

问题描述

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

整个顶部是一个<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/ 。

3 个解决方案

解决方案1
 0  2015-08-04 01:05:18

行<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;
}

看看这个小提琴

解决方案2
 0 已采纳  2015-08-04 01:07:04

设置您的li样式，使其display:inline; 。 他们将并排坐着。 另外，您还需要删除float:left 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>

解决方案3
 0  2015-08-04 01:15:32

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

// 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); 
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS导航栏样式 HTML 或 CSS 导航栏问题 使用javascript/ css平滑导航栏 JavaScript 和 CSS 网站导航栏 CSS画布和导航栏定位 转换附加导航栏 - CSS 导航栏上的 CSS 对齐问题 css 和 html 的导航栏问题 HTML / CSS顶部水平导航栏 如何在 HTML/CSS 中居中导航栏的内容？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM