Alignment inside a span

Question

I'm brushing up my HTML/CSS skills for a new job. The last time I wrote some HTML was in 1999... So, no need to say that I fell behind. So, as a fan of "Space Trader" game on Palm OS, I have decided to rewrite in HTML all the screens of the game. And I'm struggling with a CSS issue.

Here is the screen I'm trying to rewrite :

And here is my markup :

<div class="screenTitle">
    <h1 class="leftTitle">Bank</h1>
    <span class="titleButtons">
        <input type="button" id="btB" value="B" />
        <input type="button" id="btS" value="S" />
        <input type="button" id="btY" value="Y" />
        <input type="button" id="btW" value="W" />
    </span>
</div>

And the CSS :

.screenTitle {
    height: 0.7em;
    border-bottom-style: solid;
    border-color: rgb(49,0,156);
    font-size: 40px;
}
.leftTitle {
    margin-top: 0;
    font-size: 0.5em;
    text-align: center;
    color: white;
    padding-left: 0.1em;
    padding-right: 0.1em;
    background-color: rgb(49,0,156);
    float: left;
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    line-height: 1.5em;
    font-weight: bold;
}
.titleButtons {
    float: right;
}

And here is the result

So, you can see that I'm struggling with the positionning of the 4 shortcuts buttons.

Do you have any clue for me to sort this out ? And do you have any critic to formulate ?

Thanks a lot

Answer 1

   .titleButtons input {
    float: right;
    vertical-align:top;
    margin:7px 0px 0px 0px;
    }

If you add some top margin and remove som left/right margins, the buttons will also position themselves nicer on the bar.

Answer 2

You need to change the vertical alignment of your buttons. Have this in your CSS:

.titleButtons input{
   vertical-align:top;
}

Demo