html - 如何移动上面的第一个选项卡？

Question

我想超越#first_tab 以便与所有其他人保持一致。我在这段代码中做错了吗？

这是网站:

http://dl.dg-site.com/presentations/

你能帮我解决这个问题吗？

提前致谢!

代码 CSS:

     #first_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
}

#content_first{font-size: 14px;color:white;font-family: Arial, Helvetica Neue, Helvetica, sans-serif;padding-left: 10px;}

#title_first{text-align:left;color:#8CC63F; font-family: muli, sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.4;padding-left: 10px;}


#second_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left: 10px;

}

 #third_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left:10px;
}


#four_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left: 10px;

}

HTML 代码:

 <div id="first_tab">
   <p id="title_first">Qualité</p>
   <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>


</div>

<div id="second_tab">



</div>

<div id="third_tab">



</div>

<div id="four_tab">



</div>

Answer 1

由于您使用的是 display:inline-block，因此默认对齐方式是 baseline

你必须将它设置为 vertical-align:top

     #first_tab {
         width:210px;
         height:540px;
         display:inline-block;
         background: #264572;
         vertical-align: top;
     }
     #content_first {
         font-size: 14px;
         color:white;
         font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
         padding-left: 10px;
     }
     #title_first {
         text-align:left;
         color:#8CC63F;
         font-family: muli, sans-serif;
         font-size: 24px;
         font-weight: 500;
         letter-spacing: 2px;
         line-height: 1.4;
         padding-left: 10px;
     }
     #second_tab {
         width:210px;
         height:540px;
         display:inline-block;
         background: #264572;
         margin-left: 10px;
    vertical-align: top;
     }
     #third_tab {
         width:210px;
         height:540px;
         display:inline-block;
         background: #264572;
         margin-left:10px;
    vertical-align: top;
     }
     #four_tab {
         width:210px;
         height:540px;
         display:inline-block;
         background: #264572;
         margin-left: 10px;
    vertical-align: top;
     }

<div id="first_tab">
    <p id="title_first">Qualité</p>
    <p id="content_first">Le souci de qualité de nos installations, de standards européens, est au coeur de notre activité. C’est pourquoi nous choisissons des partenaires de qualité et de savoir-faire, tels que Philips, Bosch, Zanussi.</p>
</div>
<div id="second_tab"></div>
<div id="third_tab"></div>
<div id="four_tab"></div>

顺便说一句...您的代码中有很多 重复的CSS。您真的应该尝试将其简化为可以单独应用于每个元素的类。参见 Demo