HTML CSS Navbar Spacing

Я создал навигационную панель CSS, но между каждым «навигационным элементом» мало места. Я не хочу, чтобы там было какое-то пространство! Есть ли способ сделать это без изменения поля слева для каждого элемента navbar?HTML CSS Navbar Spacing

<!doctype html> 
<html> 
    <head> 
     <title>Home - UnhandyFir9</title> 
     <style> 
      #wrapper { 
       box-shadow: 0px 0px 20px 10px black; 
       left: 0px; 
       top: 0px; 
       margin: auto; 
       margin-top: 30px; 
       width: 800px; 
       background-color: rgb(200, 200, 200); 
       font-family: sans-serif; 
      } 
      #top-notification { 
       display: inline-block; 
       width: 100%; 
       height: 20px; 
       background-color: lightblue; 
       text-align: center; 
      } 
      #navbar-core { 
       width: 100%; 
       height: 30px; 
       background-color: lightgreen; 
      } 
      #navbar-item { 
       display: inline-block; 
       width: 100px; 
       height: 30px; 
       text-align: center; 
       background-color: green; 
       color: white; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span> 
      <div id="navbar-core"> 
       <a href="home.html" id="navbar-item">Home</a> 
       <a href="lessons.html" id="navbar-item">Lessons</a> 
       <a href="aboutus.html" id="navbar-item">About Us</a> 
       <a href="donate.html" id="navbar-item">Donate</a> 
      </div> 
     </div> 
    </body> 
</html>

enter image description here

источник

2013-10-25 UnhandyFir9

идентификаторы ** сусло ** быть уникальным. – j08691

j08691: это не влияет на рендеринг, все браузеры по-прежнему будут применять стиль правильно. Это стандартное нарушение, которое, конечно же, нарушит валидацию и невероятно испортит Javascript. –

@NielsKeurentjes - Я сказал, что это повлияло на рендеринг или решило проблему? – j08691

Во-первых,

#navbar-item { 
    display: inline-block; 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    background-color: green; 
    color: white; 
}

Изменить это в class вместо id. Id уникальны и могут использоваться только один раз на странице, но класс можно использовать снова и снова.

Я уверен, что пространство от этого, но я буду делать скрипку, чтобы проверить,

дисплей: встроенный блок;

Вы можете изменить display: inline-block; на float: left; и иметь его без пробела.

JSFIDDLE

источник

2013-10-25 01:59:06

-1

Чтобы решить проблему быстро, вы можете обернуть ваши ссылки пролетом и придать ему более темный фон:

<div id="navbar-core"> 
    <span class="navbar-inner-wrapper"> 
      <a href="home.html" id="navbar-item">Home</a> 
      <a href="lessons.html" id="navbar-item">Lessons</a> 
      <a href="aboutus.html" id="navbar-item">About Us</a> 
      <a href="donate.html" id="navbar-item">Donate</a> 
    </span> 
</div>

Затем добавьте это в ваш CSS:

.navbar-inner-wrapper { 
    background-color: green; 
}

источник

2013-10-25 02:00:29

Вы не должны пытаться его быстро решить, вместо этого попытайтесь исправить то, что сломано. -1 –

Проблема заключается в display:inline-block - она сводит элементы к встроенным блокам, что означает, что они ведут себя как все другие встроенные контент в HTML. Поскольку между элементами привязки есть пробелы, которые, как всегда, сворачиваются в одиночное пространство, то, что вы видите, является фактическим «пространством» между текущим размером шрифта, как и между словами в предложении. Вы можете исправить это, применив font-size:0 на контейнере, но это грязно, так как вам придется сбросить его для детей. Рекомендуемый метод заключается в том, чтобы просто использовать float:left вместо этого и вручную установить размер родителя правильно, и установить элементы в height:100%.

Использование нескольких элементов с одним и тем же идентификатором является неправильным, но не вызывает этой проблемы - все равно должно быть исправлено.

источник

2013-10-25 02:02:38

Как я упоминал в своем комментарии, идентификаторы должны быть уникальными, поэтому вместо этого используйте классы. При этом ваши ссылки являются встроенными элементами и чувствительны к пробелу, поэтому либо плавайте их влево, либо удалите пустое пространство между элементами кода.

Ex:

.navbar-item { 
    display: inline-block; 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    background-color: green; 
    color: white; 
    float:left; 
}

jsFiddle example

Пробелы удалены jsFiddle example

источник

2013-10-25 02:02:41 j08691

Попробуйте это;

.navbar-item { 
    display:block; 
    float:left; 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    background-color: green; 
    color: white; 
} 

<div id="wrapper"> 
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span> 
<div id="navbar-core"> 
<a href="home.html" class="navbar-item">Home</a> 
<a href="lessons.html" class="navbar-item">Lessons</a> 
<a href="aboutus.html" class="navbar-item">About Us</a> 
<a href="donate.html" class="navbar-item">Donate</a> 
</div>

источник

2013-10-25 02:03:48

Использование float: left; вместо display: inline-block; используя встроенный блок будет иметь запас 4px по умолчанию, но с использованием float: left; по умолчанию не имеют места. И используйте классы для каждого a element нет идентификатора, id уникальны и не должны повторяться.

.navbar-item { 
    /*display: inline-block;*/ 
    float: left; 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    background-color: green; 
    color: white; 
}

Если вы все еще хотите использовать inline-block вместо float: left; вы должны использовать margin-left: -4px;

источник

2013-10-25 02:08:32

HTML CSS Navbar Spacing

ответ

Смежные вопросы