如何將兩個div元素放在一行上？

-1

我正試圖在同一行放置以下兩個<div>元素。我應該怎麼做？如何將兩個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>

來源

2016-07-26 Sivar

使用'顯示：inline-block的;'在CSS。 – Nekomajin42

通過大量不同的方法，如'float'和'display：inline-block'。你已經嘗試了什麼？ – UncaughtTypeError

刪除開始的邊距！ –

在這裏，你走了，使用這個CSS

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

來源

2016-07-26 15:06:46

您可以使用表爲。如果你不想使用表格，那麼使用CSS float屬性。

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

希望它會有所幫助。

來源

2016-07-26 15:07:17 Pirate

我會盡量保持簡短;）。有多種方式可以做到這一點。主要部分是試圖保持簡單並理解你採取的每一步。然後一步一步（CSS &HTML）是有道理的。

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

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

只是一個建議。從HTML中分離CSS。當項目變得更大時，這會讓閱讀和維護變得更容易 - 相信我;）。

看看HTML：我們有兩個元素 - 包含標題的徽標和菜單。

的頭元素表示內容的介紹或一組導航鏈接的容器。

..也許這是太長了。我將創建另一篇文章

來源

2016-07-26 15:33:28 karlisup

試試這個：

.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 */ 
    }

來源

2016-07-26 15:55:41 Abk

如何將兩個div元素放在一行上？

回答

相關問題