Question

我有一个带有四个链接的菜单，如H4元素，还有一个图像。他们都与班级菜单在同一个div中。我将如何在CSS中将所有这些形成一行？

这是我的HTML：

    <html>
    <head> <title>Testing menu</title> </head>
    <body>
    <div class="menu">
        <a href="index.html"><img src="img/logo.png"></a>
        <a href="program.html"><h3>Program</h3></a>
        <a href="info.html"><h3>Informasjon</h3></a>
        <a href="aktiviteter.html"><h3>Aktiviteter</h3></a>
        <a href="kontakt.html"><h3>Kontakt</h3></a>
    </div>
    </body>
    </html>

我应该使用什么样的CSS来使div中的所有项目彼此相邻？

Answer 1

<强> Demo

使用display: inline-block;

CSS

.menu a {
    display: inline-block;
}

Answer 2

在代码中添加以下css规则：

.menu a { 

           float: left;
          padding: 10px;

        }

Answer 3

尝试使用inline-block：

.menu a {
    display: inline-block;
    width: 200px;
}

Answer 4

<style type="text/css">
      .menu a {
        display: inline-block;
      }
</style>

Answer 5

这是Fiddle

css inline-block将有所帮助

  .menu a{
    display: inline-block;
    float:left;

    }

如何将1个div中的4个标题放在一起？

5 个答案: