скрыть места в navbar

-1

Могу ли я удалить пробелы между кнопками навигации, размещая их по центру? Я попытался удалить inline-block в li a, но я думаю, что это не так, я думаю, это проблема display: inline-block, но я не уверен ...скрыть места в navbar

Может кто-нибудь мне помочь? Заранее спасибо.

nav ul { 
 
    text-align: center; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: auto; 
 
    background: #b2bac9; 
 
    color: #090a0d; } 
 
    nav ul li { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: inline; } 
 
    nav ul li a { 
 
     text-decoration: none; 
 
     display: inline-block; 
 
     padding: 16px; 
 
     text-decoration: none; 
 
     color: #fff; 
 
     background: red; } 
 
     nav ul li a:hover { 
 
     background: #949fb4; } 
 
#tit { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title> nav </title> 
 
    </head> 
 
    <body> 
 
    <header> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">The Project</a></li> 
 
      <li><a href="#">Forum</a></li> 
 
     </ul> 
 
     </nav> 
 
     
 
     <h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1> 
 
    </header> 
 
    </body> 
 
</html>

источник

2017-01-14 rawnly

Причина, почему это происходит потому, что при использовании элементов с inline-block они обращаются так же, как слова в тексте. Тогда разрывы строк и вкладки, которые у вас есть между элементами, будут считаться пробелами.

Чтобы исправить это, просто установите nav ul в display: table:

nav ul { 
 
    display: table; 
 
    text-align: center; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: auto; 
 
    background: #b2bac9; 
 
    color: #090a0d; 
 
} 
 
nav ul li { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: inline; 
 
} 
 
nav ul li a { 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: red; 
 
} 
 
nav ul li a:hover { 
 
    background: #949fb4; 
 
} 
 
#tit { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title> nav </title> 
 
    </head> 
 
    <body> 
 
    <header> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">The Project</a></li> 
 
      <li><a href="#">Forum</a></li> 
 
     </ul> 
 
     </nav> 
 
     
 
     <h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1> 
 
    </header> 
 
    </body> 
 
</html>

Вы также можете удалить все пробелы, разрывы строк и вкладок, между вашими элементами (которые я Wouldn» t recomment) или используйте Flexbox с justify-content: center следующим образом:

nav ul { 
    display: flex; 
    justify-content: center; 
    margin: 0px; 
    padding: 0px; 
    position: fixed; 
    width: 100%; 
    height: auto; 
    background: #b2bac9; 
    color: #090a0d; 
}

Вы можете прочитать больше об этом ей: CSS-Tricks: Fighting the Space Between Inline Block Elements

источник

2017-01-14 01:01:36 TheYaXxE

Там странная маленькая хитрость для решения этой проблемы, просто удалить пробелы в ваших <li> элементов:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title> nav </title> 
    </head> 
    <body> 
    <header> 
     <nav> 
     <ul> 
      <li><a href="#">Home</a></li><!-- 
      --><li><a href="#">The Project</a></li><!-- 
      --><li><a href="#">Forum</a></li> 
     </ul> 
     </nav> 

     <h1 id="tit" align="center"> I need to remove the balnk space between red buttons </h1> 
    </header> 
    </body> 
</html>

See JSFiddle

источник

2017-01-14 01:03:15 bbailes

скрыть места в navbar

ответ

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