Question

我想请某人请指导我如何通过名称Read More Horizontally将三个按钮完美对齐。

网站链接： http://advancedspinecareolympia.com/

PSD我试图模仿：http://i.stack.imgur.com/w4mkt.jpg

    <p class="heading">Who We Are?</p>
<p class="cdata"><span style="font-weight: bold;">Advanced Spine Care</span> is a health care clinic which focuses on recovery of musculoskeletal complaints in one place. The staff utilizes Chiropractic Mobilization, Massage and Modern Rehabilitative concepts to treat patients.</p>
<p class="cdata">Aaron Fitzpatrick Clinic Director &amp; Chiropractic Physician is also a licensed massage therapist and has worked throughout the west coast and Europe providing his services. He specializes in difficult conditions and only treats those patients he believes he can help.</p>

<div style="margin-top: 80px;">
<div style="width: 33%; float: left;">
<p style="color: #000; font-size: 1.5em; margin-bottom: 30px;">About Us</p>
<p class="cdata">Dr. Aaron will take the time to see the whole puzzle fits together. Dr. Aaron is both a Massage therapist and as well as a Chiropractor and will use tools from his medicine chest to address your complaints in a unique and therapeutic manner.</p>
<p style="margin-top: 50px;"><a class="button-link" href="#">Read More</a></p>

</div>
<div style="width: 33%; float: left;">
<p style="color: #000; font-size: 1.5em; margin-bottom: 30px;">Our Goals</p>
<p class="cdata">Dr. Aaron is committed to searching for the cause of your pain, treating it and when possible teaching you how to avoid it.</p>
<p style="margin-top: 110px;"><a class="button-link" href="#">Read More</a></p>

</div>
<div style="width: 33%; float: left;">
<p style="color: #000; font-size: 1.5em; margin-bottom: 30px;">Our Philosophy</p>
<p class="cdata">Dr. Aaron will take time to see how the whole puzzle fits.
Dr. Aaron is both a Massage therapist and as well as a Chiropractor and will use tools from his medicine chest to address your complaints in a unique and therapeutic manner</p>
<p style="margin-top: 30px;"><a class="button-link" href="#">Read More</a></p>


</div>
</div>

Answer 1

由于问题在代码方面不是很具体，我会根据您的网站上Chrome Developer Console可以检查的内容给出一般答案。

我认为可以提供帮助的是：

使div包含三个div（about / goals / philosophy）位置：relative
使按钮位置：绝对（它们将引用包含div）
给他们底部：0样式，所以他们从包含div的底部开始 - 或任何其他值，以便它们可以抵消。

Answer 2

在您的样式中添加此代码，并将font-family应用为您的PSD。

.button-link {
  -moz-user-select: none;
  background-color: #138de8;
  border-bottom: 1px solid #20538d;
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #ffffff !important;
  left: 50%;
  padding: 7px 15px;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.9);
  top: 50%;
  transform: translate(-50%, -50%);
  transition-duration: 0.2s;
  text-decoration: none;
}

<p style="margin-top: 30px;"><a class="button-link" href="#">Read More</a>
</p>

水平对齐ReadMore按钮

2 个答案: