Question

我希望能够将导航栏放在屏幕上。对于导航栏我创建了一个列表。我尝试使用表元素，但是我会失去我的链接。我的目标只是让导航栏在徽标下居中。

   font-size: 48px;
}

.img {
    
   text-align: center;
}



.table {
	/*display: table;    Allow the centering to work */
	margin: 0 auto;
}

ul#horizontal-list {
	min-width: 100%;
	list-style: none;
	padding-top: 20px;
	}
	ul#horizontal-list li {
		display: inline;
	}



.logo {
/*  top: 200px;*/
  position: relative;
  text-align: center;

}



ul {
	float: center;
position: relative;
   text-align: center;
   /*margin-left: auto;
   margin-right: auto;*/

    list-style-type: none;
    margin: 0;
    padding: 0;
/*    overflow: hidden;*/
    background-color: white; 
       z-index: -2;

}

li {
    float: left;
    border-top:3px solid #C5908E;
    border-bottom:3px solid #C5908E;

      padding: 5px;
}

li:first-child {
    border-left: 3px solid #C5908E;
}
li:last-child {
    border-right: 3px solid #C5908E;
}

/*to change font */
li a {


	text-align: center;
  display: inline;
    color:  #484846;
    font-size: 30px;
    font-family: 'Poiret One', cursive;
    
    padding: 5px ;
    text-decoration: none;
}


.links a:link    {color:#484846; background-color:transparent; text-decoration:none}
.links a:visited {color:#484846; background-color:transparent; text-decoration:none}
.links a:hover   {color:#C5908E; background-color:transparent; text-decoration:none}
.links a:active  {color:#484846; background-color:transparent; text-decoration:none}


.wrapper {
  /*padding: 20px;*/
  text-align: center;

}
</style>

<!DOCTYPE html>
<html>
<head>

<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">


<style>
@font-face {
font-family: 'Poiret One', cursive;




<div class= "title">


</div>



	<title>
	Kristin Fincken
	</title>







</div>


</head>
<body>






	
</div>

<div class="wrapper">
<br>


<div class="logo">
<img src="images/logo.png"  usemap="#rec"> 
 </div>
  
</div>

<br>
<br>
<br>
 <div class ="links" >


  <div class="table">
<ul id="horizontal-list">

<li><a href="html/design.html" >Design </a></li>
  <li><a href="html/photo.html">  Photo </a></li>
  
  <li><a href="html/web.html">Web</a></li>
  <li><a href="html/word.html">Words</a></li>
  </font>
  
</ul>
</div>

</div>



</body>
</html>

Answer 1

不要使用表格。看看这个http://codepen.io/mlegg10/pen/EZdxbd 您还应验证代码中的所有错误https://validator.w3.org/nu/

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top'
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
});

.navbar-default .navbar-brand {
    font-family: 'Poiret One', cursive;
    color: #1ee2e7;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: #fec503;
}

.navbar-default .navbar-collapse {
    border-color: rgba(255,255,255,.02);
}

.navbar-default .navbar-toggle {
    border-color: #1ee2e7;
    background-color: #1ee2e7;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #1ee2e7;
}

.navbar-default .nav li a {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    outline: 0;
    color: #1ee2e7;
}

.navbar-default .navbar-nav>.active>a {
    border-radius: 0;
    color: #fff;
    background-color: #1ee2e7;
}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #17d0d5;
}

@media(min-width:768px) {
    .navbar-default {
        padding: 25px 0;
        border: 0;
        background-color: transparent;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-default .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-default .navbar-nav>.active>a {
        border-radius: 3px;
    }

    .navbar-default.navbar-shrink {
        padding: 10px 0;
        background-color: #222;
    }

    .navbar-default.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

<!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Kristin Fincken</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden active">
                        <a href="#page-top"></a>
                    </li>
                    <li class="">
                        <a class="page-scroll" href="design.html">Design</a>
                    </li>
                    <li class="">
                        <a class="page-scroll" href="photos.html">Photos</a>
                    </li>
                    <li class="">
                        <a class="page-scroll" href="web.html">Web</a>
                    </li>
                    <li class="">
                        <a class="page-scroll" href="words.html">Words</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

让我的导航栏居中

1 个答案: