Question

我正在尝试将我的徽标放在我的网页标题旁边。我已经玩过了，但我能做的最好的事情就是将标志置于测试之上。我怎样才能解决这个问题？

 <header>
    <div class="header-content">
        <div class="header-content-inner">
            <img src="img/blue.png"><h1>WELCOME</h1>

            <p></p>
          </div>
 </header>

  <!-- CSS BEGINS -->
  header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #000;
    background-image: url();
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
 }

  header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center;
 }


  header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: lowercase;
   font-weight: 700;
   color:gray;
  }

Answer 1

使用css将图像浮动到左侧：

.header-content-inner img {
  float: left;   
}

这是一个有用的小提琴示例：https://jsfiddle.net/0ocu4pt8/

Answer 2

您可以将图像浮动到左侧！

float: left;

^只需将其添加到图像类。

Answer 3

默认情况下，标题标记（h1-h6）使用display:block，这意味着它们会占用其父容器的整个宽度。相反，您可以将h1设置为使用display: inline-block。然后它将只占用它所需的宽度，因此它可以显示在与图像相同的行上。因此，您的CSS规则将成为：

  header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: lowercase;
   font-weight: 700;
   color:gray;
   display: inline-block;
  }

将标题放在标题中的文本旁边

3 个答案: