【问题标题】:logo and h1 heading appear on same line using html and csslogo 和 h1 标题使用 html 和 css 出现在同一行
【发布时间】:2016-06-02 12:24:23
【问题描述】:

我想创建一个网页,但在将徽标显示在标题附近时遇到了问题。我已经尝试了以下代码,但这不会产生预期的结果。

我有以下代码:

.line .box .header img {
  float: left;
}

.line .box.header h1 {
  position: relative;
  top: 1px;
  left: 10px;
}
<div class="line">
   <div class="box">
      <div class="s-6 l-2"> 
         <div class="header">
             <img src="img/hrcimg.jpg" alt="logo">
             <h1>United Nations Human Rights Council</h1>
        </div>
      </div>
   </div>
</div>

网站屏幕

【问题讨论】:

  • display:inline 怎么样?
  • 试过了。不工作。
  • 尝试将 logo 放在 h1 标签内

  • 我想你在其他地方有另一种风格,它会覆盖你在这里尝试做的事情,因为它对我来说很好。
  • 为什么那一栏看起来这么小?如果文本是这样换行的,就没有空间让它坐在图像的右边。如果没有可参考的活生生的例子,很难真正解决问题。考虑创建一个可以链接到的笔,其中包含相关的样式和/或框架,以便我们更好地了解整体情况。

标签: html css heading


【解决方案1】:

你需要增加.l-2元素的宽度。

将此元素的宽度设置为 100% 将导致您的问题的标题回避到的布局。

当达到较低的分辨率时,您需要相应地调整这些样式,以便将结构保持在一个点上。
一旦分辨率达到移动比例,请考虑以自己的线条显示它们。这可以通过将徽标设置为显示为blockwidth: 100%;height: auto; 来完成,此时您还需要终止float 规则。

【讨论】:

    【解决方案2】:

    所以我做了一点点东西,如果我错了,请纠正我:)

    .line img {
      float: left;
    }
    
    .line h1 {
      position:relative;
      float:left;
      top: 1px;
      left: 10px;
    }
    

    https://jsfiddle.net/3an65dfp/3/

    【讨论】:

      【解决方案3】:

      试试这个:

      img, h1 {
        display: inline-block;
        vertical-align: middle;
      }
      <header>
        <img src="http://placehold.it/100x100">
        <h1>COMPANY NAME</h1>
      </header>

      【讨论】:

        猜你喜欢
        • 2012-07-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-02-26
        • 2022-11-14
        • 2017-12-05
        • 1970-01-01
        相关资源
        最近更新 更多