Question

我正在努力在标题中有两个小旗图标，如下图所示：

enter image description here

我相信html部分没问题，但是我无法用CSS获取它们。

   <header>

        <div class="title">
           <h1>Fonyódi Ákos <span></span> pszichológus, relaxációtréner, szimbólumterapeuta</h1>
        </div>
        <img src="img/Az_elet_faja.jpg" width="640" height="250" alt="Az élet fája">
        <div id="lang">
        <a href="../index.html"><img src="img/HUN.png" alt="Kattintson ide a magyar változatért" width="25" height="25"></a>
        <a href="../angol/index.html"><img src="img/GB.png" alt="Please click here for the english version" width="25" height="25"></a>
        </div>

    </header>

Answer 1

也许这会对你有所帮助：

header {
  position: relative;
  display: inline-block;
}
header h1 {
  position: absolute;
  top: 25px;
  padding: 10px;
  left: -10px;
  right: -10px;
  border: 1px solid gold;
  background: black;
  text-align: center;
  font: 12px verdana;
  color: gold;
}
.lang {
  position: absolute;
  top: 40px;
  right: 15px;
}

<header>
  <h1>Fonyódi Ákos <span></span> pszichológus, relaxációtréner, szimbólumterapeuta</h1>
  <div class="lang">
    <a href="../index.html">
      <img src="http://placehold.it/25x25" alt="Kattintson ide a magyar változatért" width="25" height="25" />
    </a>
    <a href="../angol/index.html">
      <img src="http://placehold.it/25x25" alt="Please click here for the english version" width="25" height="25" />
    </a>
  </div>
  <img src="http://placehold.it/640x250" width="640" height="250" alt="Az élet fája" />
</header>

Answer 2

请查看我的代码，然后根据您的需要进行更改。

<div class="title" style="float:left;background:#F00;">
    <div style="float:left;">
          <h1>Fonyódi Ákos <span></span> pszichológus, relaxációtréner, szimbólumterapeuta</h1>
     </div>

     <div id="lang" style="float:left;">
        <a href="../index.html" ><img src="img/HUN.png" alt="Kattintson ide a magyar változatért" width="25" height="25"></a>
        <a href="../angol/index.html"><img src="img/GB.png" alt="Please click here for the english version" width="25" height="25"></a>
     </div>
<div style="clear:both;"></div>
</div>

你必须使用主图像作为背景，然后将h1和两个img pic放在带有float属性的2 div中，这样它们就可以在一行中。

很抱歉使用颜色，但您可以使用背景图片。如果您遇到任何问题，请告诉我。谢谢

Answer 3

你需要让两个div浮动，以便并排显示它们。

<div class="title">
<div id="lang">

否则，它们将在另一个下面显示一个，因为div是一个块元素。

Answer 4

你可以这样做。

#lang a{
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}
#lang a.hun{
    background: url(http://placehold.it/25x25) no-repeat;
}
#lang a.gb{
    background: url(http://placehold.it/25x25) no-repeat;
}

  <header>

        <div class="title">
           <h1>Fonyódi Ákos <span></span> pszichológus, relaxációtréner, szimbólumterapeuta</h1>
        </div>
        <div id="lang">
        <a href="../index.html" class="hun"></a>
        <a href="../angol/index.html" class="gb"></a>
        </div>
    </header>

标题中的CSS标志图标

4 个答案: