h1拒绝嵌入div

时间:2016-03-09 18:54:10

标签: html css

我有一个div。宽100%,高150像素。我在其中嵌套了git commit repo B dir git push 标记,它位于图像下而不是旁边。

<h1>

CSS:

<body>
<div class='topbar'>
<img src='img source is here'/>
<h1>
GO COSMOS!!!
</h1>
</div>
</body>

3 个答案:

答案 0 :(得分:4)

标题(<h1><h2>等)是级元素:

  

块级元素占据其父元素(容器)的整个空间,从而创建“块”。本文有助于解释这意味着什么。 Source: MDN Docs

只需显示h1 inline-block,如:

 h1 {
   display: inline-block;
   vertical-align:top;
   /*vertical-align aligns it at the top of the image, instead of the baseline*/
 }

JSFiddle Example with your code

答案 1 :(得分:1)

另一种选择是将两个内部元素浮动。请参阅小提琴:https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/

 img {
   float: left;
   height: 150px;
   width: 150px;
 }

 h1 {
   float: left;
 }

答案 2 :(得分:0)

默认情况下,所有标头标签均为block,这意味着它的宽度为100%。如果您想要并排另一个元素,则需要更改display,如下所示:

h1 {
    display: inline;
}