Javascript 使用jquery/css精确垂直对齐无衬线字体
我试图将无衬线标题与其他div元素中的菜单元素精确对齐,因此基本上: 标题 A、B、C 其中A与收割台左端对齐,C与右端对齐。我使用float来分配-Elements,并计算字体大小以使标题适合div宽度。问题是我使用的是无衬线字体。这个问题用小提琴来演示 CSS 对于无衬线字体,如何将A的开头与页眉的H对齐?您可以将左边距:12px添加到左侧菜单按钮divJavascript 使用jquery/css精确垂直对齐无衬线字体,javascript,jquery,html,css,fonts,Javascript,Jquery,Html,Css,Fonts,我试图将无衬线标题与其他div元素中的菜单元素精确对齐,因此基本上: 标题 A、B、C 其中A与收割台左端对齐,C与右端对齐。我使用float来分配-Elements,并计算字体大小以使标题适合div宽度。问题是我使用的是无衬线字体。这个问题用小提琴来演示 CSS 对于无衬线字体,如何将A的开头与页眉的H对齐?您可以将左边距:12px添加到左侧菜单按钮div 请参见字母H与A不对齐。这是您的问题吗?是的,简而言之:但这会使它得到修复。有没有办法计算出12px的距离?因为这个距离也会改变为窗口大小
请参见字母H与A不对齐。这是您的问题吗?是的,简而言之:但这会使它得到修复。有没有办法计算出12px的距离?因为这个距离也会改变为窗口大小…无论你的屏幕大小如何…A总是在H之下。你可以通过移动输出窗口的大小来尝试它。是的,它在它之下,没错。我所看到的或者是让它与上面的H对齐,即使我更改了headerOkay的字体大小,我也会接受这个,然后重新打开另一个问题来指定我的问题。谢谢你的帮助
<div id="Hideheader" class="Header" style="position: absolute;font-size:40pt;padding:0px;visibility: hidden;width:auto;height:auto;">HEADER</div>
<div id="header" class="Header">HEADER</div>
<div id="menubar" class="menubar">
<div class="menubutton_left"><a href="#" id="WorkButton">A</a>
</div>
<div class="menubutton_middle"><a href="#" id="AboutButton">B</a>
</div>
<div class="menubutton_right"><a href="#" id="ContactButton">C</a>
</div> <span class="stretch"></span>
</div>
resizeHead("#Hideheader", "#header");
function resizeHead(p1, p2) {
var fontsize = parseFloat($(p1).css("font-size"));
var spacing = parseFloat($(p1).css("letter-spacing"));
var initWidth = $(p1).width();
initWidth = initWidth - spacing;
var outWidth = $(p2).width();
var s = outWidth / initWidth;
s = fontsize * s;
$(p2).css({
"font-size": s
});
}
div.Header {
font-family:sans-serif;
text-align:justify;
white-space: nowrap;
}
div.menubar {
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
margin-bottom: 0px;
position: relative;
}
div.menubutton_left, div.menubutton_middle, div.menubutton_right {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
width:60px;
}
div.menubutton_left {
}
div.menubutton_middle {
text-align: center;
}
div.menubutton_right {
text-align: right;
}
.stretch {
border: 2px dashed #444;
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}