导航按钮下面没有空格 [英] Navigation Buttons no whitespace underneathe

问题描述

真的想尝试在我的nav按钮和下面的图像之间没有空格。不能想象它太难了，但这让我有一个心理阻碍！
这是我想用箭头显示我想要改变的地方：

Really want to try have no whitespace between my nav buttons and the image below. Cant imagine it being too difficult but this has got me having a mind block! This is what I want to achieve with the arrow showing where I want the change to happen:

这是我到目前为止的代码：

This is my code so far:

    <div class="row">
      <div class="large-6 small-12 columns">
        <div class="logo"><img src="img/logo.png" alt="Body Metrix">
        </div>
      </div>

            <div class="large-6 columns" id="nav-btn">
              <ul class="navigation">
                <li class="active"><a href="#">Home</a></li>
                <li class="not"><a href="#">About</a></li>
                <li class="not"><a href="#">Contact</a></li>
                <li class="not"><a href="#">Services</a></li>
              </ul>
      </div>
    </div>

<div id="wrapper">
  <div class="row">
    <div class="large-12  columns">
      <div class="kickstart"><img src="img/kick-start.png">
        <p class="getfit"><img src="img/get-fit.png"></p>
        <p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
        <p class="get-contact"><img src="img/get-contact-btn.png"></p>
      </div>
    </div>
  </div>
</div>

和css：

ul .navigation {
    margin-left: 2.5px;

    display: block;
    list-style-type: none;
    text-align: center;
    padding: 0;
}
.navigation li {

    display: inline-block;

}
.navigation .active {
    padding:0;
    width: 100px;
    height: 100px;
    background-color: #8fbe4e;
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
}

.navigation .active a {
    margin-top: 30px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
}
.navigation .not{

    width: 100px;
    height: 100px;

}
.navigation .not a {
    background-color: #ffffff;
    text-decoration: none;
    color: #7f8183;
    font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
}

.navigation li a:hover {    
    color: #50B748;
}

#wrapper {
    background-image: url("../img/home-img.png");
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100% !important;
    z-index: 0;
}

推荐答案

code> ul 标记和下面的图片。因此，你可以这样解决问题：

There's a margin between the ul tag and the image below. Therefore you can solve the problem like so:

.navigation { margin:0; }

jsFiddle demo。

jsFiddle demo.

你会看到，默认情况下 ul 标签有上边距和下边距，例如，如果检查 ul 标记：

You see, by default ul tags have a top-margin and bottom-margin, which you can see for example if you inspect a ul tag with Chrome:

ul, menu, dir {                                             user agent stylesheet

    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

}

这篇关于导航按钮下面没有空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！