跨度中的對齊

我正在刷新我的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

跨度中的對齊

回答

相關問題