如何将按钮与“折扣”div 的底部对齐？答案

【问题标题】：How to put button in line with the bottom of the "Discounts" div?如何将按钮与“折扣”div 的底部对齐？
【发布时间】：2020-10-20 17:00:47
【问题描述】：

我只是在学习表单、输入和字段集是如何工作的，所以我试图用我自己的代码复制上面的图像。到目前为止，我已经能够弄清楚大部分，但是我不知道如何正确地将按钮与第三个div的底部对齐。我尝试了一个带有垂直对齐的跨度标签：底部，但这不起作用。另外，我尝试制作一个 div 并使用垂直对齐底部，这也不起作用。我想我对垂直对齐的理解很差，所以如果你能提供帮助，将不胜感激。

 <body style="background-color:#EEEEEE">
    
    <form name="data" action="https://www.hats.com" method="POST">
        <fieldset style="width: 750px;">
            <legend>Ordering Information</legend>
            First Name: <input type="text" name="first" placeholder="Joey" size="25">
            &nbsp &nbsp &nbsp Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
            <br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
            State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
            City: <input type="text" name="city" placeholder="York">
            Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
        </fieldset>
        <fieldset style="width: 750px;">
            <legend>Payment and Shipping</legend>
            <div style="width: 250px; float: left;">Payment:<br>
            <input type="radio" name="payment" value="Visa">Visa<br>
            <input type="radio" name="payment" value="MasterCard">MasterCard<br>
            <input type="radio" name="payment" value="Paypal">Paypal</div>
            <div style="width: 250px; float: left;"> Shipping:<br>
            <input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
            <input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
            <input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
            <div style="float: left;">Discounts:<br>
            <input type="checkbox" name="discounts" value="AAA">AAA<br>
            <input type="checkbox" name="discounts" value="AARP">AARP<br>
            <input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
            <a href="https://www.hats.com/" target="_blank" title="Hat Store"><button type="button">Join Now!</button></a>      
        </fieldset>
</form>
</body>

【问题讨论】：

将button 放在a 标记内是无效的HTML。请参阅允许的内容部分：developer.mozilla.org/en-US/docs/Web/HTML/Element/a

标签： html vertical-alignment

【解决方案1】：

3 个问题：

1：你的身体标签上缺少一个 "

2：当您使用 float:left 时，您会将元素从 dom 流中取出。在这种情况下，最好使用 display:inline-block

3: 添加 display:block, margin-left: 你的 a 标签

注意：您的表单看起来不错。

a{
display:inline-block;
margin-left:10px;

}

<body style="background-color:#EEEEEE">
    
    <form name="data" action="https://www.hats.com" method="POST">
        <fieldset style="width: 750px;">
            <legend>Ordering Information</legend>
            First Name: <input type="text" name="first" placeholder="Joey" size="25">
            &nbsp &nbsp &nbsp Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
            <br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
            State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
            City: <input type="text" name="city" placeholder="York">
            Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
        </fieldset>
        <fieldset style="width: 750px;">
            <legend>Payment and Shipping</legend>
            <div style="width: 250px; float: left;">Payment:<br>
            <input type="radio" name="payment" value="Visa">Visa<br>
            <input type="radio" name="payment" value="MasterCard">MasterCard<br>
            <input type="radio" name="payment" value="Paypal">Paypal</div>
            <div style="width: 250px; float: left;"> Shipping:<br>
            <input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
            <input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
            <input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
            <div style="display:inline-block;">Discounts:<br>
            <input type="checkbox" name="discounts" value="AAA">AAA<br>
            <input type="checkbox" name="discounts" value="AARP">AARP<br>
            <input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
            
            <a  href="https://www.hats.com/" target="_blank" title="Hat Store"><button type="button">Join Now!</button></a>      
        </fieldset>
</form>
</body>

但更好的方法是使用 flex：

#container{
display:flex;
justify-content:space-around;
align-items:bottom;
align-items:flex-end;
}

<body style="background-color:#EEEEEE">
        
        <form name="data" action="https://www.hats.com" method="POST">
            <fieldset style="width: 750px;">
                <legend>Ordering Information</legend>
                First Name: <input type="text" name="first" placeholder="Joey" size="25">
                &nbsp &nbsp &nbsp Last Name: <input type="text" name="last" placeholder="Shmoey" size="25">
                <br> <br> Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30">
                State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2">
                City: <input type="text" name="city" placeholder="York">
                Zip:<input type="text" name="zip" placeholder="17402" maxlength="5" size="8">
            </fieldset>
            <fieldset style="width: 750px;">
                <legend>Payment and Shipping</legend>
                <div id='container'>
                <div >Payment:<br>
                <input type="radio" name="payment" value="Visa">Visa<br>
                <input type="radio" name="payment" value="MasterCard">MasterCard<br>
                <input type="radio" name="payment" value="Paypal">Paypal</div>
                <div > Shipping:<br>
                <input type="radio" name="shipping" value="Priority $7.99">Priority %7.99<br>
                <input type="radio" name="shipping" value="Standard $3.99">Standard $3.99<br>
                <input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</div>
                <div> Discounts:<br>
                <input type="checkbox" name="discounts" value="AAA">AAA<br>
                <input type="checkbox" name="discounts" value="AARP">AARP<br>
                <input type="checkbox" name="discounts" value="Haltz Member">Hatz Member</div>
                
                
                <a  href="https://www.hats.com/" target="_blank" title="Hat Store"><button type="button">Join Now!</button></a>   </div>   
            </fieldset>
    </form>
    </body>

【讨论】：

【解决方案2】：

您应该在此处为所有字段标签使用label 标签。

每个单选按钮列表也应该包含在它自己的 fieldset

也不要使用br 之类的标签或&nbsp; 之类的元素作为间距，而是使用用户margin 或padding。

现在让我们将单选按钮和标签封装在标签标签中。这将有助于对齐链接。不要在链接中使用按钮，它是无效的 HTML，可能会导致奇怪的行为。相反，适当地设置链接的样式，我会让它看起来像一个链接，因为它是指向在新标签页中打开的外部网站的实际链接。

body {
  background-color: #EEEEEE
}

.flex {
  display:flex;
}

label.wide {
  padding-right: 1em;
}

label {
  white-space:nowrap;
  padding-bottom:0.5em;
  display:inline-block;
}



fieldset fieldset {
  border: none;
  padding-bottom:0;
}

#paymentShippingFields fieldset label {
  display: block;
  padding-bottom:0;
}

#paymentShippingFields fieldset {
  border:none;
  width:33%;
}

<form name="data" action="https://www.hats.com" method="POST">
  <fieldset style="width: 750px;">
    <legend>Ordering Information</legend>
    <fieldset id="nameField">
      <label class="wide">First Name: <input type="text" name="first" placeholder="Joey" size="25"></label>
      <label>Last Name: <input type="text" name="last" placeholder="Shmoey" size="25"></label>
    </fieldset>
    <fieldset id="addressField">
      <label>Street Address: <input type="text" name="address" placeholder="1234 Sesame Street" size="30"></label>
      <label>State: <input type="text" name="state" placeholder="PA" maxlength="2" size="2"></label>
      <label>City: <input type="text" name="city" placeholder="York"></label>
      <label>Zip:  <input type="text" name="zip" placeholder="17402" maxlength="5" size="8"></label>

    </fieldset>
  </fieldset>
  <fieldset style="width: 750px;" id="paymentShippingFields">
    <legend>Payment and Shipping</legend>
    <div class="flex">
      <fieldset>
        <legend>Payment:</legend>
        <label><input type="radio" name="payment" value="Visa">Visa</label>
        <label><input type="radio" name="payment" value="MasterCard">MasterCard</label>
        <label><input type="radio" name="payment" value="Paypal">Paypal</label>
      </fieldset>
      <fieldset>
        <legend>Shipping:</legend>
          <label><input type="radio" name="shipping" value="Priority $7.99">Priority %7.99</label>
          <label><input type="radio" name="shipping" value="Standard $3.99">Standard $3.99</label>
          <label><input type="radio" name="shipping" value="Overnight $15.99">Overnight $15.99</label>
      </fieldset>
      <fieldset>
        <legend>Discounts:</legend>
          <label><input type="checkbox" name="discounts" value="AAA">AAA</label>
          <label><input type="checkbox" name="discounts" value="AARP">AARP</label>
          <label>
            <input type="checkbox" name="discounts" value="Haltz Member">Hatz Member
            <a href="https://www.hats.com/" target="_blank" title="Hat Store">Join Now!</a>
          </label>
       </fieldset>
    </div>
  </fieldset>
</form>

【讨论】：