列表元素之間不需要的空間

問題已經結束，我現在正在進行我的網站開發，謝謝。列表元素之間不需要的空間

的問題是在我的網站（我看它在Chrome）：http://albertorestifo.com/

導航菜單的元素之間，有邊框和下一個列表元素之間的不需要的空間。當你在「畫廊」上懸停時，它是可見的。

這裏的HTML：

<nav> 
      <ul> 
       <li class='active'><a href="/">Home</a></li> 
       <li><a href="/gallery/">Gallery</a></li> 
       <li><a href="/about/">About Me</a></li> 
       <li><a href="/contact/">Contact Me</a></li> 
      </ul> 
     </nav>

而且這裏的CSS：

header nav, header nav ul, header nav ul li, header nav ul li a { height: 100%; } header nav ul li a { display: block; } 

header nav ul li { 
    display: inline-block; 
    line-height: 150px; 

    padding: 0 20px; 
    border-left: 1px solid #2d2d2d; 
} 
    header nav ul li:last-child { border-right: 1px solid #2d2d2d; } 

    header nav ul li:hover, header nav ul li.active { 
    background-color: #0072bc; 
    } 

    header nav ul li a { 
    text-decoration: none; 
    color: white; 
    font-size: 1em; 
    font-weight: 700; 
    text-transform: uppercase; 
    }

加少量復位：

ul, ul li { margin: 0; padding: 0; }

我想指出，我使用Normalize.css ，所以每個瀏覽器都應該顯示它。

我不知道如何解決這個問題，它從來沒有發生過我！

演示：http://jsfiddle.net/EaAvx/

來源

2013-09-21 Alberto

最好在'a'元素上設置填充（無論如何你都是它的一個塊元素），這樣當用戶單擊填充時，就會遵循鏈接。現在，用戶將點擊列表項的填充，這將不會執行任何操作。 –

@BramVanroy是的，你是完全正確的，我會解決它，謝謝。 – Alberto

這是因爲你的list-items是inline-block元素。

使用以下任一方案：

更改HTML這樣：移除你的標記的白色空間..

<li class='active'><a href="/">Home</a></li><li><a href="/gallery/">Gallery</a></li><li><a href="/about/">About Me</a></li><li><a href="/contact/">Contact Me</a></li>

或..

<li class='active'><a href="/">Home</a></li><!-- 
--><li><a href="/gallery/">Gallery</a></li><!-- 
--><li><a href="/about/">About Me</a></li><!-- 
--><li><a href="/contact/">Contact Me</a></li>

作爲去除空白區域的替代方法，您始終可以使用a DD陰性切緣：

header nav ul li { 
    margin:0px -2px; 
}

或設置font-size爲0px父..

注意，還有因爲這個在你的CSS 1px的差距：

border-left: 1px solid #2d2d2d;

...如果你想，你可以避免所有這些'hacker'，只需將元素從inline-block更改爲浮動元素。

來源

2013-09-21 14:56:21

這工作得很好，它在代碼中看起來很糟糕，但這並不重要。我不知道內聯塊顯示的這種特性。謝謝。 – Alberto

@Alberto我添加了一個替代方案..這裏有更多的選項http://css-tricks.com/fighting-the-space-between-inline-block-elements/編輯..它是技術上不壞的代碼，以消除白色空間..實際上有更糟糕的解決方案，如不關閉標籤，或使用負邊距。 –

真的很有趣的文章，實際上，使用flexbox可能解決了我很多問題，它也會更容易做到響應。 – Alberto

這是因爲你有li作爲行內塊。

設置此：

nav > ul { 
    font-size:0; 
} 

nav li { 
    font-size:16px; 
}

而完成的。

來源

2013-09-21 14:58:00

這樣我就不能在ems中聲明字體大小了，對吧？ – Alberto

聰明的黑客行內嵌塊的方式。我必須記住這一點。 –

是的，你在那裏有缺點。 –

你可以解決這個問題這樣的，這裏有一個FIDDLE

header nav ul li { 
    float: left; 
    list-style: none; 
    line-height: 150px; 
    padding: 0 20px; 
    border-left: 1px solid #2d2d2d; 
}

來源

2013-09-21 14:59:25 mdesdev

使用的所有選擇器設置padding和margin然後用盒子大小

*, *:after, *:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding:0; 
    margin:0; 
}

演示：http://jsfiddle.net/EaAvx/2/

來源

2013-09-21 15:01:00