Question

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

这是网站：

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

提前致谢！

代码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

＆＃13;

     #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;
     }

＆＃13;

<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>

＆＃13;

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

Answer 2

只需添加

float: left;

到#first_tab

Answer 3

试试这个......

Add float:left for all tab class
 #first_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        float: left;
}
#second_tab
{
        width:210px;height:540px;
        display:inline-block;
        background: #264572;
        margin-left: 10px;
        float: left;

}

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


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

}

Answer 4

添加#first_tab“

margin: 0 auto; position: absolute;

如何移动上面的第一个标签？

4 个答案: