html - 弹出窗口中列内的对齐问题

Question

我面临列内对齐的问题。我不确定我出了什么问题。不同的浏览器显示不同的结果。 Chrome 和 IE 的 react 相似。 Safari 和 Firefox 也是如此。我正在设计一个弹出窗口。在弹出窗口中有三个主要的 DIV。页眉、正文和页脚。正文具有三个 DIV 作为三列。除了正文中的中间列外，其他所有内容都完美对齐。弹出宽度为 810px。中间一列是它的 32%。我面临的问题。

1. 中间栏的第一个框是电子邮件地址框，出于某种原因，宽度在 chrome 和 IE 中要小得多。
2. 第二个框是红色的 Sumbit 框 - 与列中其他任何内容的电子邮件地址框不对齐
3. 第三个是文本 - 我们永远不会分享您的电子邮件地址 - BR - 我们为什么要问 - 隐私政策。出于某种原因，当我使用 BR 分隔这两行时，第二行“Why we ask - Privacy Policy”与中心对齐。我想让它左对齐。
4. 最后一个框 - 已经是成员(member)？登录 - 此处的框未正确左对齐。

列中的所有内容都没有左对齐。我无法为 margin-left 分配任何内容，因为它会丢弃我的第三列图像。我附上了中间栏的 HTML 和 CSS。谢谢

input [type=text] {
    
    padding:1px;
    border:1px;
    -webkit-border-radius: 13px;
    width:236px;
    font-size:11px;
    font-family: Lucida Grande;
    font-weight: regular;
    margin-left: 2px;
    margin-top:10px;
    
    }
    
    input[type=submit] {
    
    background: #9B1C1F;
    font-family: Lucida Grande;
    color: #ffffff;
    font-weight: bold;
    font-size:14px;
    text-align:left;
    width: 241px;
    margin-top:10px;
    padding:5px 15px; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 2px;
    
    }
    #already {
     float:left;
    padding: 5px 5px 5px;
    width:236px;
    background: #A2CD39;
    font-family: Lucida Grande;
    font-size:18px;
    margin-left:0px;
    margin-top:30px;
    color: #ffffff; 
    display: inline-block;
    }

    #whyweask {
    float: left;
    font-size:12px;
    margin-left:0px;
    margin-top:7px;
    
    }

    #middlecolumn {
    float: left;
    width:32%;
    margin-top:36px;
    }

<div>
    <div id="middlecolumn"> 
        <form name="MailingList" method="post"  action="Config_FullStoreURLMailingList_subscribe.asp">
            <span style="margin-left:1px;">
                <input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="30px">
                <br>
                <onclick="javascript:location.href='www.thankyou.html'">
                <input type="submit"  value="SUBMIT">
            </form>
            <div id="whyweask">We will never share your email address.</br>
                Why we ask - <u><a href="www.privacypolicy.com">Privacy Policy</u></a>
            </div>
            <div>
                <span id="already">
                    Already Member?  
                    <b><u><a href="login.html"> Login </a></u></b> </span>
                </div>
            </div>
        </div>

Answer 1

1. 您的 input [type=text] 中有一个空格，将其删除以使其成为 input[type=text]。
2. 所有元素(input[type=text]、input[type=submit]、#already)都定义了宽度( width:236px;, width:241px;, width:236px;)。您需要将它们更改为相同的宽度，或者最好是 width: 100%; 以适合您的 #middlecolumn 元素容器。
3. 您在 #whyweask 元素中的文本没有定义宽度。继续并向其中添加 width: 100%;。
4. 现在一切都应该适合您的 #middlecolumn 元素并且完全对齐。

专业提示:您始终可以在容器周围放置边框(在本例中为 #middlecolumn)，例如 #middlecolumn { border: 1px solid red ; } 这样你就可以直观地看到你的元素是如何适合内部调试的。我通常会在我的网络检查器工具中执行此操作以快速测试，而无需将其保存到我的 CSS 中。