问题描述
我有两个组成我的标题的div, #title 和 #header 。它们在 #totalTop 内。它们应该与顶部齐平,并且应该彼此齐平。以下是它的样子:
以下是相关部分的CSS代码:
#totalTop {
text-align:center;
}
#title {
background-image:url(../ img / TopBannerGradientOrange.png);
border-bottom-color:#FFF;
text-align:center;
border-bottom-style:solid;
border-bottom-width:3px;
background:url(../ img / TopBannerGradientOrange.png);
height:150px;
width:20%;
font-size:25px;
display:inline-block;
}
#header {
border-bottom-color:#FFF;
border-bottom-style:solid;
border-bottom-width:3px;
background:repeat-x;
background:url(../ img / TopBannerGradientOrange.png);
宽度:60%;
text-align:center;
height:150px;
display:inline-block;
margin-top:0;
}
我怎样才能让它们融合在一起?
编辑:
我的完整样式表中已经有了reset.css。添加了 vertical-align:top; ,所以现在它只是看起来像这种元素之间的差距。这是约3-4像素和Chrome的检查工具我无法弄清楚它是否是 #title 或 #header 这是造成问题的原因:
我认为您需要 vertical- align:top 在你的显示:inline-block 元素上。
如果不是这样,请尝试删除HTML标记内部的所有空白符号。
(它是一个)
我不确定,因为您没有显示所有相关的代码。
I have two divs that make up my header, #title and #header. They are inside #totalTop. They should be flush against the top, and they should be flush against each other. Here's how it looks like:
http://i53.tinypic.com/2ykj0b7.jpgy
Here's the CSS code for the relevant part:
#totalTop { text-align: center; } #title { background-image: url(../img/TopBannerGradientOrange.png); border-bottom-color: #FFF; text-align: center; border-bottom-style: solid; border-bottom-width: 3px; background: url(../img/TopBannerGradientOrange.png); height: 150px; width: 20%; font-size: 25px; display: inline-block; } #header { border-bottom-color: #FFF; border-bottom-style: solid; border-bottom-width: 3px; background: repeat-x; background: url(../img/TopBannerGradientOrange.png); width: 60%; text-align: center; height: 150px; display: inline-block; margin-top: 0; }
How can I get them to fit together? I already have reset.css in my full stylesheet.
Edit:
Added the vertical-align: top;, so now it only looks like this sort of gap between elements. It's about 3-4px and with Chrome's Inspect Tool I can't figure out whether it is #title or #header that's causing the problem:
http://i55.tinypic.com/j0i4nr.jpg
I think you need vertical-align: top on your display: inline-block elements.
That should sort it out.
If it's not that, try removing all whitespace inside your HTML markup around those elements.
(it's a known issue)
I'm not sure because you haven't shown all the relevant code.
这篇关于CSS Div对齐问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!