Не могу получить li inline

Я пытаюсь сделать горизонтальное навигационное меню. Я хочу получить логотип, а затем части меню, но встроенный не работает.Не могу получить li inline

Я хотел изображения над текстом, так что я использовал таблицу, чтобы получить это, но это сломало встроенный эффект .. Я бы признателен за любую помощь

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>TechSocket</title> 

    <style> 
    html, body { 
     width: 100%; 
     height: 90%; 
    } 
    body { 
     background-color: #000; 
    } 
    #nav { 
     display: inline; 
     background-color: #CF6; 
     position: fixed; 
     padding: 1%; 
     width: 97%; 
    } 
    ul { 
     diplay: inline; 
     list-style-type: none; 
     margin: 0; 
     padding: 0%; 
    } 
    #nav li { 
     display: inline; 
    } 
    #logo { 
     padding-left: 0%; 
    } 
    table { 
     border-spacing: 25px; 
    } 
    </style> 
    <script> 
    </script> 
</head> 

<body> 
<div id="nav"> 
    <ul> 
    <li><a id="headIMG" href="#"><img id="logo" src="100-Beanie-Drive-Logo-250.jpg" width="250" height="100"/></a><li> 
    <li> 
     <table> 
     <tr> 
      <td><a href="#" class="text"><img id="text1"src="mouse.png" width="50" height="50"/></a></td> 
      <td><a href="#" class="text"><img id="text2" src="cam.png" width="50" height="50"/></a></td> 
      <td><a href="#" class="text"><img id="text3"src="cloud.png" width="50" height="50"/></a></td> 
      <td><a href="#" class="text"><img id="text4"src="clock.png" width="50" height="50"/></a></td> 
     </tr> 
     <tr> 
      <td>Mouse</td> 
      <td>Camera</td> 
      <td>Cloud</td> 
      <td>Clock</td> 
     </tr> 
    </li> 
    </ul> 
</div> 
<div id="main"> 
</div> 
</body> 
</html>

источник

2013-12-14 Anonymous

Try плавающего влево, как так:

#nav li { 
    float: left; 
}

источник

2013-12-14 22:28:56 vcapra1

Вы, наверное, не нужно иметь эту линию для уль

diplay: inline;

В качестве альтернативы вы можете использовать display:inline-block, который может удовлетворить ваши потребности лучше.

Элементы li являются элементами блока, поэтому встроенный, вероятно, не работает с ними, особенно когда в них есть другие элементы. Я просто догадываюсь, но никогда не проверял его.

Что касается плавания, то лично я бы против этого. Я всегда считал, что это вызывает проблемы, когда они не используются должным образом. Тем не менее, это возможное решение.

источник

2013-12-14 23:17:51

Не могу получить li inline

ответ

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