HTML/CSS - нежелательный Wordwrap в ul, li

Question

Я работаю на домашней странице, и у меня проблема с моим меню-баром!

Я сделал неупорядоченный список с некоторыми элементами и CSS-тегом «display: inline-block»! Тем не менее, если я нахожу один из элементов, последний элемент переходит в следующую строку!

Info: Проблема возникает только в встроенном браузере просмотра Dreamweavers! Если я открою сайт в Firefox, он отлично работает!

You can see the concept on http://test.guger.bplaced.net!

Кто-нибудь может мне помочь?

Спасибо!

HTML,-код:

<nav id="cNav"> 
    <table class="tNav"> 
     <tr> 
      <td> 
       <ul> 
        <li><a href="/">G</a></li> 
        <li><a href="/">Home</a></li> 
        <li><a href="">Software</a></li> 
        <li><a href="about/">&Uuml;ber</a></li> 
       </ul> 
      </td> 
     </tr> 
    </table> 
</nav> 

CSS-индекс:

#cNav { 
    background-color: rgb(5, 90, 160); 

    margin: 0; 
    padding: 0; 

    width: 100%; 
} 

.tNav { 
    margin-left: auto; 
    margin-right: auto; 

    font-weight: bold; 
    font-size: 22pt; 

    margin-top: 0; 
    margin-bottom: 0; 
    padding: 0; 
} 

.tNav ul { 
    padding: 0; 
    margin-top: 0.4em; 
    margin-bottom: 0.4em; 

    margin-left: 0; 
    margin-right: 0; 

    /*If I write this tag here, it works!*/ 
    /*width: 101%;*/ 
} 

.tNav ul li { 
    display: inline-block; 

    padding-left: 2em; 
    padding-right: 2em; 

    padding-top: 0; 
    padding-bottom: 0; 
} 

    .tNav ul li a { 
     outline: 0; 

     color: white; 

     position: relative; 

     text-decoration: none; 

     transition: color 0.3s; 
    } 

    .tNav ul li a::after { 
     position: absolute; 

     top: 100%; 

     left: 0; 

     width: 100%; 

     height: 4px; 

     background: white; 

     content: ''; 

     opacity: 0; 

     -webkit-transition: background 0.3s, opacity 0.3s, -webkit-transform 0.3s; 

     -moz-transition: background 0.3s, opacity 0.3s, -moz-transform 0.3s; 

     transition: background 0.3s, opacity 0.3s, transform 0.3s; 

     -webkit-transform: translateY(10px); 

     -moz-transform: translateY(10px); 

     transform: translateY(10px); 

     margin: 0; 
    } 

    .tNav ul li a:hover { 
     color: #7297EC; 
    } 

    .tNav ul li a:hover::after {  
     opacity: 1; 
     background: #7297EC; 
     -webkit-transform: translateY(0px); 
     -moz-transform: translateY(0px); 
     transform: translateY(0px); 
    } 

скриншот проблемы:

Answer 1

Положите дивы внутри уль> LI и использовать CSS для сделайте грязную работу по созданию реагирующих столбцов :) https://css-tricks.com/guide-responsive-friendly-css-columns/