个人中心
gpt4 book ai didi

html - 制作等高的列效果不佳？

转载 作者：行者123 更新时间：2023-11-28 05:31:26 25 4
gpt4 key购买 nike

我已经尝试使用 display"table; 和 display: table-cell; 使 div 像表格一样工作的方法，但现在由于某种原因我的表格不是变得相同的高度，我不确定为什么会这样，这是我添加 css 时的样子:

enter image description here

这是我不这样做的时候:

enter image description here

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <link rel="stylesheet" href="css/normalize.css"   type="text/css" media="screen" /> 
        <link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" /> 
    </head>
    <body>
        <form action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" method="post" id="application" name="application">
        <fieldset>
        <legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png"alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>

          <div class="clearfix parent">
            <aside class="l child">
            <fieldset>
            <legend>Primary Applicant's Information</legend>

            <table>
              <tr>
                  <td>First Name*</td>    
                  <td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus"></td>
              </tr>
              <tr>
                  <td>Surname*</td>
                  <td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
              </tr>
              <tr>
                  <td>Date of Birth*</td>    
                  <td><input type="text" name="dob" id="dob" size="10" maxlength="9" placeholder="MMMDDYYYY"></td>
              </tr>
              <tr>
                  <td>Email Address*</td>    
                  <td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
              </tr>
              <tr>
                  <td>Phone No.*</td>    
                  <td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
              </tr>
            </table>
            </fieldset>
            </aside>

            <section class="s child">
            <fieldset>
            <legend>Primary Applicant's Address</legend>
            <table>

                <tr>
                    <td>Home Address*</td>
                    <td>Apt.</td>
                </tr>
                <tr>
                    <td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
                    <td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
                </tr>

                <tr>
                    <td><br />City* </td>
                </tr>
                <tr>
                    <td><input type="text" name="city" id="city" size="20" maxlength="40">
                </tr>
                <tr>
                    <td><br />Province*</td>
                    <td><br />Postal Code</td>
                </tr>
                <tr>
                    <td>
                        <select id="province" name="province" size="2">
                            <optgroup label="Province">
                                <option value="">(Select a Province)</option>
                                <option value="Alberta">Alberta</option>
                                <option value="British Columbia">British Columbia</option>
                                <option value="Manitoba">Manitoba</option>
                                <option value="New Brunswick">New Brunswick</option>
                                <option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
                                <option value="Nova Scotia">Nova Scotia</option>
                                <option value="Ontario">Ontario</option>
                                <option value="Prince Edward Island">PE</option>
                                <option value="Quebec">Quebec</option>
                                <option value="Saskatchewan">Saskatchewan</option>
                            </optgroup>
                            <optgroup label="Territory">
                                <option value="Northwest Territories">Northwest Territories</option>
                                <option value="Nunavut">Nunavut</option>
                                <option value="Yukon">Yukon</option>
                            </optgroup>
                        </select>
                    </td>
                    <td>
                        <input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
                    </td>
                </tr>
            </table>
            </fieldset>
            </section>

            <aside class="r child">
            <fieldset>
            <legend>Housing Status</legend>

            <table>
                <tr>
                    <td>Do you:</td>
                    <td>$Monthly Payment*  </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>

                    <td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
                </tr>
                <tr>
                    <td>Monthly Income*</td>
                    <td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
                </tr>
                <tr>
                    <td>Years at current location*</td>
                    <td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
                </tr>
                <tr>
                    <td>Pre-authorized Code*</td>
                    <td><input type="text" name="preCode" id="preCode" size="8"></td>
                </tr>
            </table>
            </fieldset>
            </aside>
          </div>

          <div class="clearfix parent">
            <section class="s child">
                <fieldset>
                <legend>Reserved - See below</legend>
                    <p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
                    <p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
                </fieldset>
            </section>

            <aside class="l child">
            <fieldset>
            <legend>Credit Check / Email Consent</legend>
                <p><b>I consent to have a credit check performed</b></p>
                <input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
                <input type="checkbox" name="creditCheck" id="c02" value="No" />No
                <br />                                         

                <p><b>I consent to have email messages sent to me</b></p>
                <input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
                <input type="radio" name="emailConsent" id="m02" value="No" />No
                <br />                                         
                Submitted on:

                <script>
                    var d = new Date();
                    document.write(d.toDateString());
                </script>

                &ensp; &ensp; Ref. #                    <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
                <!--Submit Application--> <input type="submit" value="Submit Application">
                <!--Start Over-->         <input type="reset" value="Start Over">
                                          <input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
                                          <input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
            </fieldset>
            </aside>

          </div>



        </fieldset>
        </form>


        <footer class=f>
            <a href="../">My zenit Account</a>   <a href="javascript/">My JavaScript</a>   <a href="css/">My CSS</a>   <a href="honesty.html">My Honesty</a> 
            <script>
                var dt=new Date(document.lastModified);   // Get document last modified date
                document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
            </script>
        </footer>
    </body>
</html>

CSS:

footer.f
{
    text-align: center;
}

legend 
{ 
    border: 4px groove #ff0000;
    background-color: #9999ff; 
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    padding: 15px; 
    text-shadow:0.1em 0.1em 0.01em #333;
}

legend.t
{
     vertical-align: top;
}

fieldset
{
    border-color:#F00;
    border-style: solid;
}

html, body 
{
    max-width: 100%;
    /*overflow-x: hidden;*/
    margin:0;
}

aside.r 
{
  float: right;
  width: 31%;
  margin: 1%;

}

aside.l
{
  float: left;
  width: 31%;
  margin: 1%;



}
section.s /*shadow on sections*/
{

    width: 31%;
    margin: 1%;
    display: inline-block;

}

.clearfix:before,
.clearfix:after 
{
    content: " ";
    display: table;
}
.clearfix:after 
{
    clear: both;
}
/**
 * For IE 6/7 only
 */
.clearfix 
{
    *zoom: 1;
}

table
{
    border-spacing: 5px;
    border-collapse:separate;
}

.parent 
{
  display: table;
}
.child 
{
  display: table-cell;
}

最佳答案

在您提供的代码中，一些标签没有关闭

 <tr>
     <td><input type="text" name="city" id="city" size="20" maxlength="40"> <!-- Missing </td> -->
 </tr>

这里在类上添加双引号

<footer class=f> <!-- <footer class="f"> -->

关于html - 制作等高的列效果不佳？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38492111/

25 4 0
文章推荐： javascript - 向我发送重复数据
文章推荐： c++ - 动脉(静脉扩展)示例不起作用
文章推荐： javascript - 使用递归过滤 JavaScript 中的对象数据
文章推荐： c++ - 链表和文件 I/O C++
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com