Question

我正在尝试建立一个网站，导航栏上方有一个标题或空白区域，我已经在这里挣扎了三个小时......我正在使用名为“Foundation”的框架。我真的很想知道我做错了什么，所以感谢任何帮助！这是我的代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles/foundation.css">
    <link rel="stylesheet" href="styles/foundation-overwrite.css">
    <title>Svale Rejser</title>
</head>
<body>


<div class="header">
</div>
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <img src="pictures/logo_temp.png">
    </li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Home</a></li>
      <li><a href="#">Excursions</a></li>
      <li><a href="#">Booking</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <!-- Left Nav Section -->

  </section>
</nav>


    <!--Scripts Here-->
    <script src="scripts/jquery-1.10.2.js.js"></script>
    <script src="scripts/foundation.js"></script>
    <script src="scripts/foundation.topbar.js"></script>

</body>

这是CSS：

/*NAVIGATION STYLING*/

.header{
    margin:auto !important;
    max-width:80% !important;
    max-height:30% !important;

}
.top-bar{
    clear:both !important;
    height:70px !important;
    font-family:Verdana,sans-serif !important;
    max-width: 80% !important;
    margin: auto !important;


}

.right{
    padding-right:50px !important;

}

.name{
    padding-left:50px !important;

}

.top-bar-section ul{


}

.top-bar-section li a:not(.button){
    padding: 12px 15px !important;
}

.top-bar-section ul li > a {
    display: block;
    width: 100%;
    color: white;
    padding: 12px 0 12px 0 !important;
    padding-left: 15px;
    font-family: Verdana, sans-serif !important;
    font-size: 20px !important;
    font-weight: normal;
    background: #333333; 
}

 .top-bar .name {
    height: 45px;
    margin-top:12px !important;
    font-size: 20px !important; 

 }

感谢提前!!!

Answer 1

没有看到一个有效的例子，很难解决发生的事情。我可以将你的导航栏包含在一个带有.top-bar的类中。您是否尝试过更改保证金？所以它写着：

.top-bar{
clear:both;
height:70px;
font-family:Verdana,sans-serif;
max-width: 80%;
margin: 20px auto 0 auto;
}

这应该给它一个20px的上限。

你也应该不惜一切代价避免使用！important

在导航上方添加空格/标题。

1 个答案: