Question

我是HTML 5的新手，但我想在徽标图片旁边放置一个文字。我尝试了以下代码，但无法正常工作

  <header> 
    <a href="/" title="Return to the homepage" id="logo">
      <img src="/images/cagd_logo.jpg" alt="CAGD logo" 
      style="width:30px;height:30px;"/>
   </a>
   <h1>CAGD Data Centre Access Form</h1>
</header>

文本用h1元素包装。

标题的CSS代码

  header {
    background-color:ash;
    text-align:left;
    height:35px;
    padding:12px; 
      }

对我有任何帮助。

Answer 1

默认情况下，

h1元素显示为块。使用span

＆＃13;

header {
  background-color: ash;
  text-align: left;
  height: 35px;
  padding: 12px;
}

＆＃13;

<header>
  <a href="/" title="Return to the homepage" id="logo">
    <img src="/images/cagd_logo.jpg" alt="CAGD logo" style="width:30px;height:30px;" />
  </a>
  <span>CAGD Data Centre Access Form</span>
</header>

＆＃13;

如果您无法将元素类型更改为span，请使用display:inline;

＆＃13;

header {

    background-color: ash;

    text-align: left;

    height: 35px;

    padding: 12px;

  }

  h1 {

    display: inline;

  }

＆＃13;

<header>
  <a href="/" title="Return to the homepage" id="logo">
    <img src="/images/cagd_logo.jpg" alt="CAGD logo" style="width:30px;height:30px;" />
  </a>
  <h1>CAGD Data Centre Access Form</h1>
</header>

＆＃13;

或，使用:after伪选择器

＆＃13;

header {
  background-color: ash;
  text-align: left;
  height: 35px;
  padding: 12px;
}
#logo:after {
  content: 'CAGD Data Centre Access Form';
}

＆＃13;

<header>
  <a href="/" title="Return to the homepage" id="logo">
    <img src="/images/cagd_logo.jpg" alt="CAGD logo" style="width:30px;height:30px;" />
  </a>
</header>

＆＃13;

放置与徽标相邻的文本

1 个答案: