Не могу подключиться

Question

Не могу подключиться

0

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

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

<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>

Luke K 15 дек. 2013, в 00:09

Источник

Теги:

html

css

inline

menu

2 ответа

Ещё вопросы

Luke K · Answer 1 · 2013-12-14T21-46-00.000Z

Вам, вероятно, не нужно иметь эту строку для вашей ul

diplay: inline;

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

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

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

vcapra1 · Answer 2 · 2013-12-14T21-03-00.000Z

Попробуйте плавать влево, например:

#nav li {
  float: left;
}