按钮未对齐实施 CSS

Question

这是我的问题的图片：

如果您仔细观察，每个部分下方的按钮没有正确对齐。

这是我的代码：

.locouter {
  width: 100%;
  border: none;
}
.locouter td {
  text-align: left;
  vertical-align: top;
}
.usplit {
  border: none;
  width: 100%;
}
.usplit td {
  width: 33%;
  text-align: left;
  vertical-align: top;
  padding: 15px;
  font: 14px/20px Arial, Helvetica, Sans-serif;
  color: #000000;
}
.usplit td h3 {
  font: 24px/24px DinWebCond, Sans-serif;
  color: #000000;
  margin: 0px;
  text-transform: uppercase;
}
.usplit td button {
  display: block;
  float: right;
  margin-top: 10px;
  outline: none;
  font: 14px/14px DinWebCond, Sans-serif;
  color: #808080;
  border: 1px solid #c0c0c0;
  background-color: #f0f0f0;
  border-radius: 3px;
  cursor: pointer;
  padding: 9px 10px 7px 10px;
  text-transform: uppercase;
  text-shadow: 0px 1px 0px #ffffff;
  box-shadow: inset 0px 1px 0px #ffffff;
}

<table class="locouter" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="ulower" colspan="3">
        <table class="usplit" cellspacing="0" cellpadding="0">
          <tr><td>
            <h3>Book a Party</h3>
            Having a bachelor party, corporate outing or just celebrating with good friends? Book a party at <xsl:value-of select="/*/location/name" /> and get ready for the time of your life!<br />
            <button>Book a party now</button>
            </td><td>
            <h3>Apply for a Job</h3>
            <xsl:value-of select="/*/location/name" /> has no current job listings, however we are always looking for the right people, so if you think you have what it takes, fill out an application!<br /><br/>
            <button>Fill out job application</button>
            </td>
            <td><h3>Join Mailing List</h3>Join this club's mailing list and receive updates on the latest club parties, events, promotions and more. <br/><br/><br/>
              <button>Join Mailing List</button>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

如果仔细观察，您会在实施 <button> 元素之前看到一组 <br/>'s。我正在使用 breaks 而不是 CSS 定位，事实是我真的不确定如何让按钮对齐。

正如预期的那样，中断导致按钮对齐方式不同。

Answer 1

您可以执行以下操作：

删除所有多余的 <br /> 元素。
将 position: relative; 和 padding-bottom: 55px; 添加到您的 .usplit td 规则。
将 position: absolute; 和 bottom: 0; 添加到您的 .usplit td button 规则。（并且，可选地，删除 10px 顶部边距）
下次使用JSFiddle帮助其他人更快地回答您的问题:)

祝你好运

按钮未对齐实施 CSS

Buttons not aligning implementing CSS

html

css

css-position