Меню горизонтального навігації css створює непотрібне порожнє місце

У мене є горизонтальне навігаційне меню з елементами ul/li.

Мені потрібно мати межу 1px навколо кожного елемента li. Мені не потрібна межа 2px, коли елементи li близькі один до одного. Це мій код:

HTML:


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, другою та третьою елементами елемента тощо. Я не розумію, звідки виходить цей простір, і як його видалити?

You can see this in fiddle: http://jsfiddle.net/Xye3L/1/

2

7 Відповіді

Найкращий спосіб вирішити цю проблему - встановити розмір шрифту на 0 в .top_nav , щоб він був таким

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

Також слід встановити розмір шрифту в .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;
}

Можливо, це посилання допоможе вам, він має більш детальну інформацію

Боротьба з проміжком між внутрішніми блоковими елементами | CSS-трюки


Also there is another way to solve this , you can easily add float: left in .top_nav li

Так буде так

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

Сподіваюсь, це допоможе вам ...

2
додано

використовувати цей 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; 
}
1
додано

Просто додайте поплавок: ліворуч;

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

Спробуйте цей код:

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

Це встановлює відстань між елементом li. Ви можете налаштувати за необхідності.

0
додано

Просто використовуйте display: block і float: left у вашому CSS :

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

замість:

.top_nav li {
    display: inline-block;
}
0
додано

оновити CSS до

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

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

0
додано

видалити всі інтервали, вкладки між усіма лініями.

0
додано