Недостатки меню CSS при зависании

У меня возникли проблемы с тем, чтобы моя опция наведения навигация плавно совпадала. Между моими ссылками меню есть разрыв в 1-2 пикселя. Я посмотрел на css и использовал опцию проверки элемента в Firefox, но я не могу найти, что вызывает эту проблему. Любая помощь в разрешении этого вопроса была бы очень признательна, и я упомянул, что я начинаю, когда дело доходит до css, поэтому некоторые из css могут не быть «стандартной практикой».Недостатки меню CSS при зависании

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="IM3._0._Default" %> 
<link href="StyleSheet1.css" rel="stylesheet" /> 
<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div class="TopContainer"> 
      <div class="Header"> 

      </div> 
      <div class="BumperBar1"> 

      </div> 
      <div class="NavBar"> 
       <ul id="navlist"> 
       <li><asp:LinkButton ID="LinkButton1" runat="server" CssClass="LinkButtons">Link 1</asp:LinkButton></li> 
       <li><asp:LinkButton ID="LinkButton2" runat="server" CssClass="LinkButtons">Link 2</asp:LinkButton></li> 
       <li><asp:LinkButton ID="LinkButton3" runat="server" CssClass="LinkButtons">Link 3</asp:LinkButton></li> 
       <li><asp:LinkButton ID="LinkButton4" runat="server" CssClass="LinkButtons">Link 4</asp:LinkButton></li> 
       <li><asp:LinkButton ID="LinkButton5" runat="server" CssClass="LinkButtons">Link 5</asp:LinkButton></li> 
       <li><asp:LinkButton ID="LinkButton6" runat="server" CssClass="LinkButtons">Link 6</asp:LinkButton></li> 
       <li><asp:LinkButton ID="LinkButton7" runat="server" CssClass="LinkButtons">Link 7</asp:LinkButton></li> 
      </ul> 
     </div> 
    </div> 
    <div class="MainContent"> 

    </div> 
</form> 
</body> 
</html>

body { 
    background-color: #D9D9D9; 
    padding: 0px; 
    margin: 0px; 
} 

.TopContainer{ 
    background-color: white; 
    width: 100%; 
    border-bottom: 1px solid; 
    border-bottom-color: Black; 
    height: 100px; 
    display: table; 
} 

.Header{ 
    background-color: White; 
    width: 1000px; 
    margin: auto; 
    height: 67px; 
    display: block; 
} 

.BumperBar1{ 
    height: 3px; 
    width: 100%; 
    background-color: #999; 
    display: block; 
} 

.NavBar{ 
    background-color: White; 
    width: 1000px; 
    margin: auto; 
    height: 30px; 
    display: block; 
} 

#navlist{ 
    margin: 0; 
    padding-left: 10px; 
} 

#navlist li{ 
    display: inline-block; 
    height: 30px; 
    margin: 0; 
    padding: 0; 
} 

#navlist li:hover{ 
    background-color: #57A1D3; 
} 

#navlist li a{ 
    height: 30px; 
} 

.MainContent{ 
    background-color: White; 
    width: 1000px; 
    margin: auto; 
    min-height: 800px; 
} 

#form1{ 
    margin: 0; 
} 

.LinkButtons{ 
    padding-right: 13px; 
    padding-left: 13px; 
    line-height: 30px; 
    margin: 0; 
    color: #57A1D3; 
    text-decoration: none; 
} 

.linkbuttons:hover{ 
    color: white; 
}

источник

2014-08-27 cdouglas10683

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

Удаление пустого пространства между элементами Li в вашем коде, ex </li><li>
Сплав элементов списка слева
Использование HTML-комментарии, чтобы занять пространство между элементами списка, экс </li><li>
Установка размера шрифта на <ul> до нуля, а затем сбросить его на то, что вам нужно на <li>

источник

2014-08-27 20:46:19 j08691

Да поплавок: левый; починил это. Я знал, что это должно быть что-то простое, но просто не видно. Спасибо за помощь в этом! – cdouglas10683

Попробуйте добавить поплавком: слева #navList литий

#navlist li{ 
    display: inline-block; 
    height: 30px; 
    margin: 0; 
    padding: 0; 
    float: left; 
}

Смотреть это работает здесь: http://jsfiddle.net/zmawbhvq/

источник

2014-08-27 20:48:28 allen1

Недостатки меню CSS при зависании

ответ

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