我想超越#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>
最佳答案
由于您使用的是 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
关于html - 如何移动上面的第一个选项卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28694160/