html item item wraps при изменении IE

У меня есть горизонтальная панель меню, созданная с использованием UL и LI. Проблема, с которой я сталкиваюсь, - это когда на домашней странице (default.aspx) элементы меню с длинными именами изящно изменяются при изменении размера IE, но как только вы нажимаете на элемент меню, и вы находитесь на этой странице, меню становится неуклюжим, и пункты меню с длинными именами обертываются на следующую строку. Вот что я говорю о том, что я не делаю этого обертки и делаю UL не изменением размера во второй картинке?html item item wraps при изменении IE

whacky menu bar http://i45.tinypic.com/2lkxlwk.jpg

<link rel="stylesheet" type="text/css" href="/css/dssmenu.css" /> 
<div id="content-container"> 
<ul> 
    <li><a id="link1" href="http://mysite/Pages/Training.aspx">Training</a></li> 
    <li><a id="link2" href="http://mysite/Pages/Briefings.aspx">Briefings</a></li> 
    <li><a id="link3" href="http://mysite/Pages/SecurityDirectives.aspx">Security Directives</a></li> 
    <li><a id="link4" href="http://mysite/Pages/DSSInspections.aspx">DSS Inspections</a></li> 
    <li><a id="link5" href="http://mysite/Pages/AdverseInformation.aspx">Adverse Information</a></li> 
    <li><a id="link6" href="http://mysite/Pages/Travel.aspx">Travel</a></li> 
    <li><a id="link7" href="http://mysite/Pages/Resources.aspx">Resources</a></li> 
</ul> 
</div>

А сам CSS ..

#content-container { 
    font-family: "Trebuchet MS", Verdana, serif; 
    width:100%; 
    margin:0 auto; 
    padding:0; 
}  
#content-container ul { 
    border-bottom: 18px solid #C93; 
    list-style: none; 
    margin:0 -10px;; 
    padding-bottom: 1px; 
    overflow: visible; 
    width:98%; 
}  
#content-container ul li { 
    float: left; 
    padding:0; 
    margin:0; 
    text-align: center; 
    width: 14.256%; 
}  
#content-container ul li a { 
    border-left: 1px #fff solid; 
    line-height:36px; 
    text-decoration:none; 
    color:#ddd; 
    background-color:#2E4B68; 
    display:block; 
    font-size:1.5em;  
}  
#content-container ul li a:hover { 
    background-color: #C93; 
    color:#000; 
}

источник

2012-06-17 Athapali

Вы должны рассмотреть Nowrap.

#content-container ul li a { 
    .... 
    white-space: nowrap; 
}

источник

2012-06-17 18:23:07

Ваш код помог !!! Элементы меню не переносятся на следующую строку, но последний пункт меню все еще падает на следующую строку, поскольку я продолжаю сокращать окно IE. Похоже, что ширина контейнера уменьшается и нажимает элементы списка на следующую строку. Пожалуйста, помогите .. – Athapali

просто не подходит для минимальной ширины, выделенной для браузера. Попробуйте сделать то же самое для # content-container ul {white-space: nowrap; } –

html item item wraps при изменении IE

ответ

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