Question

我正在尝试将以下两个<div>元素放在同一行上。我该怎么做？

<nav>
  <div class="logo" style="background:#00f; margin-right:100px; margin-left:1150px;">
    <img src="jiasaz-4.png" width="100px" height="100px">
  </div>

  <div class="menu" style="background:#f00;">
    <img src="jiasaz-4.png" width="100px" height="100px">
  </div>
</nav>

Answer 1

在这里，请使用此css

.logo, .menu{ display:inline-block'}

Answer 2

我会尽量保持简短;）。有多种方法可以做到这一点。主要部分是试图保持简单并理解你采取的每一步。然后一步一步（CSS和HTML）是有道理的。

＆＃13;

.logo { 
  display: inline-block;
  width: 100px;
}
.logo img {
  max-width: 100%;
}

.menu {
  display: inline-block;
  height: 80px;   
}

/* just to color up things */
header { background-color: tomato }
.logo { background-color: firebrick }
.menu { background-color: wheat }

＆＃13;

<header>
  <div class="logo">
      <img src="http://www.jiasaz.com/wp-content/uploads/2015/08/jiasaz-4.png">
  </div>
  <nav class="menu">
    <ul>
      <li><a href="#">Item1</a></li>
      <li><a href="#">Item1</a></li>
    </ul>
  </nav>
</header>

＆＃13;

只是一个建议。将CSS与HTML分开。当项目变得更大时，这将使它更容易阅读和维护 - 相信我;）。

看看HTML：我们有两个元素 - 徽标和菜单，由标题包装。

标题元素表示介绍性内容的容器或一组导航链接。

..也许这太长了..我会创建另一篇文章

Answer 3

您可以使用表格。如果您不想使用表，请使用CSS float属性。

float : left;
position: Relative;
display:inline;

希望它会有所帮助。

Answer 4

试试这个：

.logo{ float: left;
       display: inline;
       width: 25%;}

.menu{ float: left;
       display: inline;
       width: 60%;}
/* you can use the 15% remaining for padding in menu and logo class*/
nav{
    padding: ;/* try different value */
    }

如何在一行上放置两个div元素？

4 个答案: