Блог

Я пытаюсь точно выровнять заголовок без засечек с элементами меню в других div-элементах, так что в основном это:

Заголовок
A B C

где A выравнивается по левому краю заголовка, а C — по правому краю. Я использую float для распределения элементов и вычисляю размер шрифта, чтобы он соответствовал ширине заголовка div. Проблема в том, что я использую шрифт без засечек. Проблема демонстрируется в скрипке

http://jsfiddle.net/ksuTQ/2/

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

jscript

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

CSS

 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
}
 

Как мне выровнять начало буквы A с буквой H заголовка для шрифта без засечек?

Вы можете добавить margin-left:12px в левую кнопку меню div.

Смотрите демонстрацию