Extra gaps between menu items [duplicate]

Question

This question has already been answered:

How to remove spaces between span 2 responses

The picture shows that when you hover between the menu elements there is a small space. The question is how to remove it. The code is attached.

$(document).ready(function() { $('li').click(function() { $("li.active").removeClass("active"); $(this).addClass('active'); }) });

 * { margin:0; padding:0; } #menu { width:100%; height: auto; background: #313A3F; } header { width:100%; height:auto; background: #2794CF; color: white; padding: 40px; padding-left: 100px; } #company_name { font-size: 45px; font-family: 'Kaushan Script', cursive; } #subtitle { font-size: 45px; position:absolute; left:800px; top:48px; font-family: 'Marck Script', cursive; } #menu_ul { /*list-style-type: none;*/ font-family: 'Open Sans Condensed', sans-serif; color:white; border-bottom: 10px solid #2794CF; font-size: 26px; margin-bottom:30px; vertical-align: middle; text-align: center; font-variant: small-caps; text-transform: uppercase; } #menu_ul li { display: inline-block; width:auto; padding:30px; border-left: 1px solid black; transition:0.3s ease; } #menu_ul li:first-child { border-left: none; } li.active { background: #2794CF; border-bottom: 10px #313A3F solid; } #menu_ul li:not(.active):hover { cursor: pointer; background: black; transition:0.2s ease; height:auto; border-bottom: 10px solid white; } #menu_ul li:not(.active):not(:first-child):hover + li, #menu_ul li:not(.active):not(:first-child):hover, #menu_ul li.active + li, #menu_ul li.active { border-left:transparent 1px solid; }

 <html> <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> <meta charset="UTF-8"> <title>Генератор слоганов - TaglineDraft</title> <link href="main.css" type="text/css" rel="stylesheet"> <link href="favicon.ico" type="image/png" rel="shortcut icon"> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Marck+Script&subset=cyrillic,latin' rel='stylesheet' type='text/css'> <script src="index.js"></script> </head> <body> <header><font id="company_name">TaglineDraft</font><span id="subtitle" align="right">Бесплатный сервис для Ваших идей</span></header> <div id="menu"> <ul id="menu_ul"> <li class="active">генератор слоганов</li> <li>аббревиатуры</li> <li>генератор паролей</li> <li>генератор брендов</li> <li>лучшее</li> </ul> </div> <div id="slogan_generator"> </div> <div id="abbr"> </div> <div id="pass_generator"> </div> <div id="brand_generator"> </div> <div id="the_best"> </div> <!--<footer><font id="about"><name>TaglineDraft</name> - это сервис, позволяющий Вам создавать лозунги и слоганы на любую тематику. Также Вы можете сгенерировать безопасный пароль для Вашего аккаунта, интересное, звучное название для Вашей компании и расшифровывать аббреавитуры! Присоединяйтесь к нам)</font></footer> --> </body> </html

@ soledar10, thank you, it helped a lot) write as an answer, put a voice)
There was still such a problem - when switching to the first element for a split second, a white left frame appears, then disappears.
@Niklex first you need to understand what is beyond the scope) look through the debugger, for example, what style is applied, and you will understand what needs to be fixed.
as an option - a dotted line may appear, for example, the outline the active element leads to this.
or blindly "nullify" the border and outline for all states)))

lexxl lexxl 5,051 2 13 35 · Accepted Answer · 2016-03-06T18:20:29

It seems to me that in such cases it is better to comment out the line break when forming the list: ... </li><li> ... Readability is preserved, the code does not change.

 $(document).ready(function() { $('li').click(function() { $("li.active").removeClass("active"); $(this).addClass('active'); }) });

 * { margin:0; padding:0; } #menu { width:100%; height: auto; background: #313A3F; } header { width:100%; height:auto; background: #2794CF; color: white; padding: 40px; padding-left: 100px; } #company_name { font-size: 45px; font-family: 'Kaushan Script', cursive; } #subtitle { font-size: 45px; position:absolute; left:800px; top:48px; font-family: 'Marck Script', cursive; } #menu_ul { /*list-style-type: none;*/ font-family: 'Open Sans Condensed', sans-serif; color:white; border-bottom: 10px solid #2794CF; font-size: 26px; margin-bottom:30px; vertical-align: middle; text-align: center; font-variant: small-caps; text-transform: uppercase; } #menu_ul li { display: inline-block; width:auto; padding:30px; border-left: 1px solid black; transition:0.3s ease; } #menu_ul li:first-child { border-left: none; } li.active { background: #2794CF; border-bottom: 10px #313A3F solid; } #menu_ul li:not(.active):hover { cursor: pointer; background: black; transition:0.2s ease; height:auto; border-bottom: 10px solid white; } #menu_ul li:not(.active):not(:first-child):hover + li, #menu_ul li:not(.active):not(:first-child):hover, #menu_ul li.active + li, #menu_ul li.active { border-left:transparent 1px solid; }

 <html> <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> <meta charset="UTF-8"> <title>Генератор слоганов - TaglineDraft</title> <link href="main.css" type="text/css" rel="stylesheet"> <link href="favicon.ico" type="image/png" rel="shortcut icon"> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Marck+Script&subset=cyrillic,latin' rel='stylesheet' type='text/css'> <script src="index.js"></script> </head> <body> <header><font id="company_name">TaglineDraft</font><span id="subtitle" align="right">Бесплатный сервис для Ваших идей</span></header> <div id="menu"> <ul id="menu_ul"> <li class="active">генератор слоганов</li><!-- --><li>аббревиатуры</li><!-- --><li>генератор паролей</li><!-- --><li>генератор брендов</li><!-- --><li>лучшее</li> </ul> </div> <div id="slogan_generator"> </div> <div id="abbr"> </div> <div id="pass_generator"> </div> <div id="brand_generator"> </div> <div id="the_best"> </div> <!--<footer><font id="about"><name>TaglineDraft</name> - это сервис, позволяющий Вам создавать лозунги и слоганы на любую тематику. Также Вы можете сгенерировать безопасный пароль для Вашего аккаунта, интересное, звучное название для Вашей компании и расшифровывать аббреавитуры! Присоединяйтесь к нам)</font></footer> --> </body> </html

LostDok LostDok 107 eleven · Answer 2 · 2016-03-07T12:34:59

As an option, you can add in menu_ul

 list-style-type: none;

And in #menu_ul li

 display: block; float:left;

Extra gaps between menu items [duplicate]

Reported as a duplicate by PashaPash member ♦ Dec 31 '16 at 14:20 .

2 answers 2

More articles: