Question

我有一个导航菜单，其中li非常接近。如何增加菜单之间的margin-left。我在.main_menu li尝试了它，但它不起作用。以及如何将selected添加到菜单中。即点击菜单时，它应具有类似:hover的属性（黑色背景和蓝色文字）

这是一个小提琴： Fiddle

Answer 1

使用display:inline更改display:inline-block并在课程margin-left中添加您想要的.main_menu li 试试这个：

.main_menu li {
    display:inline-block;
    padding-left:1px;
    font:bold;
    margin-left:10px;
}

DEMO

Answer 2

将margin-left添加到a而不是li：DEMO

Answer 3

请参阅此Fiddle

使用inline-block代替inline。

.main_menu li
{
    display:inline-block;
    padding-left:1px;
    margin-left: 2px;
    font:bold;
}

内联元素没有“框”布局，因此不会应用边距。但块元素（或内联块元素）可以。

Answer 4

将显示类型更改为inline-block，然后保证金属性将起作用。

.main_menu li {
display:inline-block;
padding-left:1px;
font:bold;
margin-left:10px;
}

http://jsfiddle.net/5s2mQ/14/

Answer 5

添加到a就行了。可能你也想对齐它。

/* the margin part so the buttons won't touch eachother */
margin-left: 10px;
margin-top: 2px; /* optional, you only asked for the left */
/* to align: */
width: 18%;
float: left

http://jsfiddle.net/5s2mQ/24/

增加ul-li菜单和Selected Menu之间的差距

5 个答案: