Question

好的，我有两个按钮需要并排坐着。我明白了。但右边的“按钮”比左边的高。为什么？我相信这是因为我的右键“按钮”有两行文字。我的支持者不会让这个按钮有两行文字。有谁知道如何更好地做到这一点？

我将代码放在jsfiddle：http://jsfiddle.net/energeticpixels/k7awcfts/

中

这是我的代码：

<div id='tonyzBTNs'>
            <a id='regCourse' class='btn' href='https://cloudlms.slhc.serco-na.com' target='_blank'>Register for Course</a>
            <a id='regTest' class='btn' href='https://www.atrrs.army.mil/atrrscc/courseInfo.aspx?fy=2016&amp;sch=910&amp;crs=4E-F33%2f645-F17+(DL)&amp;crstitle=ARMY+ELECTRICAL+EXPLOSIVE+SAFETY+(CERT)&amp;phase=' target='_blank'>Register for Exam<span style="font-size: 10px;"><br />(after completing the course)</span></a>
        </div>

和css：

#tonyzBTNs {
              margin-top: 20px;
              margin-bottom: 20px;
            }
            #tonyzBTNs .btn {
              text-align: center;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 18px;
              font-weight: bold;
              text-decoration: none;
            }
            #tonyzBTNs #regCourse {
              background-color: #9EB95C;
              border: 2px solid #708542;
              border-radius: 10px;
              padding: 10px;
              color: black;
            }
            #tonyzBTNs #regTest {
              background-color: #C54F4D;
              border: 2px solid #6A4346;
              border-radius: 10px;
              padding: 1px 10px 1px 10px;
              color: white;
              display: inline-block;
            }

Answer 1

根据网站其余部分的布局方式，在float: left;中使用#tonyzBTNs #regCourse可能会解决您的问题。

Updated Fiddle

Answer 2

#tonyzBTNs .btn {
    ...
    vertical-align: top;
    display: inline-block;
}

<强> Demo

btns（作为锚标签）不是在同一高度，而是并排

2 个答案: