Нежелательное пространство между элементами списка

Проблема закончилась, теперь я продолжаю развивать свой сайт, спасибо.Нежелательное пространство между элементами списка

Проблемы на моем сайте (я его просмотр в 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>

В качестве альтернативы удалению пробела вы всегда можете добавить отрицательная маржа:

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

или установить font-size в 0px на родителе ..

Обратите внимание, есть еще разрыв 1px из-за этого в вашем CSS:

border-left: 1px solid #2d2d2d;

... если бы вы этого хотели, вы могли бы избежать всех этих «хаков» и просто изменить элемент с inline-block на плавающий элемент.

источник

2013-09-21 14:56:21

Это сработало отлично, оно выглядит плохо в коде, но это не важно. Я не знал об этой характеристике отображения встроенного блока. Благодарю. – Alberto

@Alberto Я добавил альтернативу. Здесь есть больше вариантов. Http://css-tricks.com/fighting-the-space-between-inline-block-elements/ EDIT .. это технически неплохой код для удаления белого пространство .. Есть на самом деле гораздо худшие решения, такие как не закрытие тегов или использование отрицательного поля. –

Действительно интересная статья, на самом деле, с использованием 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

все селектор, чтобы установить отступы и поля затем использовать коробчатого проклейки

*, *: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