css水平導航菜單創建不必要的空白區域

我需要在每個li元素周圍有1px邊框。 li元素彼此靠近時，我不需要2px邊框。這是我的代碼：

HTML：

<ul class="top_nav"> 
    <li class="li_h"><a href="">Home</a> 
    </li> 
    <li class="li_au"><a href="">About Us</a> 
    </li> 
    <li class="li_c"><a href="">Categories</a> 
    </li> 
    <li class="li_cu"><a href="">Contact Us</a> 
    </li> 
    <li class="li_sl"><a href="">Successfull Letters</a> 
    </li> 
</ul>

CSS：

.top_nav { 
    list-style-type: none; 
    list-style-image: none; 
} 
.top_nav li { 
    display: inline-block; 
} 
.top_nav li { 
    height: 71px; 
    border-left: 1px solid #dfdfdf; 
    border-top: 1px solid #dfdfdf; 
    border-bottom: 1px solid #dfdfdf; 
} 
.li_h { 
    width: 89px; 
} 
.li_au { 
    width: 99px; 
} 
.li_c { 
    width: 110px; 
} 
.li_cu { 
    width: 106px; 
} 
.li_sl { 
    width: 148px; 
    border-right: 1px solid #dfdfdf; 
} 
.top_nav li a { 
    text-decoration:none; 
} 
.top_nav li a:hover { 
    color: purple; 
}

此代碼創建邊界，因爲我需要。然而，正如你所看到的，在第一個和第二個li元素，第二個和第三個li元素等之間存在一些空間。我不明白這個空間來自哪裏以及如何去除它？

您可以在小提琴看到：http://jsfiddle.net/Xye3L/1/

來源

2013-06-26 renathy

解決這個問題的最好辦法是設置字體大小到在.top_nav所以它會是這樣

.top_nav { 
    list-style-type: none; 
    list-style-image: none; 
    font-size: 0; 
}

你也應該設置字體-size in .top_nav li所以它會是這樣的

.top_nav li { 
    display: inline-block; 
    height: 71px; 
    border-left: 1px solid #dfdfdf; 
    border-top: 1px solid #dfdxwxwfdf; 
    border-bottom: 1px solid #dfdfdf; 
    font-size: 16px; 
}

也許這個鏈接可以幫助你，它有更多的細節

Fighting the Space Between Inline Block Elements | CSS-Tricks

也有另一種方式來解決這個問題，你可以輕鬆地添加浮動：在.top_nav裏留下

因此，這將是這個樣子

.top_nav li { 
    float: left; 
    height: 71px; 
    border-left: 1px solid #dfdfdf; 
    border-top: 1px solid #dfdxwxwfdf; 
    border-bottom: 1px solid #dfdfdf; 
}

希望這會幫助你...

來源

2013-06-26 12:59:50 MujtabaFR

更新你的CSS來

.top_nav li { 
    float: left; 
    margin-right: 1px; 
}

http://jsfiddle.net/Xye3L/2/

來源

2013-06-26 12:55:55 Pavel

就在您的CSS使用display: block和float: left：

.top_nav li { 
    display: block; 
    float:left; 
}

而不是：

.top_nav li { 
    display: inline-block; 
}

來源

2013-06-26 12:56:22 Atrox111

刪除所有LI之間的所有間距，選項卡。

來源

2013-06-26 12:57:40

只需添加float：left;

.top_nav li { 
float: left; 
height: 71px; 
border-left: 1px solid #dfdfdf; 
border-top: 1px solid #dfdfdf; 
border-bottom: 1px solid #dfdfdf; 
}

來源

2013-06-26 12:58:58

嘗試此代碼：

.top_nav li { 
    display: inline-block; 
    margin-right: -3px; 
}

這設置li元素之間的距離。您可以根據需要進行調整。

來源

2013-06-26 13:01:43 Gimmy

使用這個CSS

.top_nav li { 
    height: 71px; 
    border-right: 1px solid #dfdfdf; 
    border-top: 1px solid #dfdfdf; 
    border-bottom: 1px solid #dfdfdf; 
    float: left; 
} 
.top_nav li:first-child { 
    border-left: 1px solid #dfdfdf; 
}

來源

2013-06-26 13:05:49

css水平導航菜單創建不必要的空白區域

回答

相關問題