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

编程问答 2022-06-07

问题描述

I'm trying to get the button to look like the picture

我只是在学习表单，输入和字段集的工作方式，因此我试图用自己的代码复制上面的图像。到目前为止，我已经能够弄清大部分内容，但是我不知道如何正确地将按钮与第三格的底部对齐。我尝试了一个带有vertical-align：bottom的span标记，但是没有用。另外，我尝试制作一个div并使用底部垂直对齐，但这也不起作用。我认为我对垂直对齐方式的了解不多，因此，如果您能提供帮助，将不胜感激。

 <body style="background-color:#EEEEEE">
    
    <form name="data" action="https://www.hats.com" method="POST">
        <fieldset style="width: 750px;">
            <legend>Ordering @R_809_4045@ion</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>

解决方法

3个问题：

1：您的身体标签上缺少一个“

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

3：添加display：block，左边距：您的标记

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

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>

,

您应在此处为所有字段标签使用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>

htmlvertical-alignment