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>

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

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

Answer 1

您可以执行以下操作：

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

祝你好运

按钮没有对齐实现CSS

1 个答案: