跨度中的对齐

我正在刷新我的HTML/CSS技能以用于新作业。上次我写了一些HTML是在1999年......所以，没必要说我落后了。因此，作为Palm OS“Space Trader”游戏的粉丝，我决定在HTML中重写游戏的所有屏幕。我正在努力解决CSS问题。跨度中的对齐

这里是我试图重写屏幕： enter image description here

这里是我的标记：

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

而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

所以，你可以看到我正在与t挣扎他定位了4个快捷键。

你有什么线索可以解决这个问题吗？你有没有批评者制定？

非常感谢

来源

2014-01-13 Harkonnen

你想定位它们的位置？ –

您需要更改按钮的垂直对齐。有这个在你的CSS：

.titleButtons input{ 
    vertical-align:top; 
}

Demo

来源

2014-01-13 14:12:36 tomsullivan1989

我只是让一个所以想到在这里添加我的演示:) –

干杯，只是要添加一个我自己！ – tomsullivan1989

+1：正如我打算回答，但打字速度非常慢！：| – NoobEditor

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

如果你添加一些边距和删除SOM左/右页边距，按钮也将自己定位更好了吧。

来源

2014-01-13 14:19:21 Terje

跨度中的对齐

回答

相关问题