Question

我试图制作水平导航菜单。我想获得徽标，然后是菜单的部分，但内联不起作用。

我想要图片上方的图片，所以我用了一张桌子来解决这个问题，但这打破了内联效果......我很乐意为你提供帮助

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

Answer 1

尝试将其浮动到左侧，如下所示：

#nav li {
  float: left;
}

Answer 2

您可能不需要为ul

设置此行

diplay: inline;

或者，您可以使用display:inline-block，这可能更适合您的需求。

li元素是块元素，因此内联可能不适用于它们，特别是当它们内部有其他元素时。我只是在猜测，从未真正测试过它。

至于漂浮，我个人反对它。我总是发现它在没有正确使用时会引起问题。也就是说，这是一种可能的解决办法。

无法获得内联

2 个答案: