html - 为适应特定屏幕尺寸而更改时，表单 HTML 和 CSS 媒体查询出现 float 错误

Question

我正在建立一个新网站，在跨平台媒体 CSS(用于更改网站布局以适应特定屏幕尺寸)期间，我发现页面上的表单有一个 float 错误，结束在其中而不是像我最初计划的那样将自己置于页面中间，坚持屏幕的右侧直到页面尺寸减小并且它改变以适应更小的屏幕(例如手机)，但即便如此它仍然漂浮在右边。

附上图片。

我知道我解释它的方式听起来令人困惑，但一旦您看到问题，我确信有一个相对容易的解决方案，我只是找不到它。

这让我感到困惑，因为相同的逻辑基本上应用于页面顶部的文本，而且它们似乎完美无缺。

错误发生前出现 float 错误的表单:

错误后有 float 错误的表单:

在调整以适应较小的屏幕尺寸之前页面顶部的文本

调整后页面顶部的文本以适应较小的屏幕尺寸

我已多次尝试清除 float ，坦率地说，此时我对为解决此问题所做的尝试次数感到非常困惑。

这是表单的 HTML 和 CSS:

HTML:

<!--CONTACT US FORM-->
        <div id="contact">
            <h3>Contact Us</h3>
            <form class="contact-form" action="contact.php" method="post">
                    <div class="label-spacer"><label>Name</label></div>
                        <input type="text" placeholder="Name" required>
                    <div class="label-spacer"><label>Email</label></div>
                        <input type="email" placeholder="Email Address" required>
                    <div class="label-spacer"><label>Message</label></div>
                        <textarea type="message" placeholder="Message" required></textarea>
                    <a class="btn" type="submit">Submit</button></a>
            </form>
        </div>

表单的所有相关 CSS:没有媒体查询 CSS:

#content {
    margin-top: 1%;
    float:left;
    width:65%;
}

/* 联系人框 */

#contact{
    float:right;
    width:30%;
    margin-top:10px;
    margin-right: 5%;
    margin-bottom:10px;
    max-width:600px;
    background:#35424a;
    box-sizing: border-box;
    text-align: center;
    padding:15px;
    color:#ffffff;
}

.contact-form input, .contact-form textarea{
    width:90%;
    padding:5px;
    margin-bottom:7px;
}

.contact-form input{
    border: 2px solid #ccc; 
}

.contact-form textarea{
    height: 100px;
    border: 2px solid #ccc;
}

使用媒体查询 CSS:

@media(max-width: 768px){
    #content,
    #topleft,
    #topright{
        float:clear;
        text-align:center;
        width:100%;
    }


    #contact{
        float:clear;
        width:90%;
        background:#35424a;
        box-sizing: border-box;
        text-align: center;
        color:#ffffff;
        margin-top:10px;
        margin-bottom:10px;
        padding:15px;
    }

#contact form input[type="email"], .contact-form input, .contact-form textarea{
        width:90%;
        margin-bottom:7px;
    }

@media(max-width: 1230px){
(SAME AS THE OTHER MEDIA QUERY ABOVE)
}

!!!这里还有页面顶部文本的 HTML 和 CSS!

HTML:

<!--HEADER & SHOWCASE BACKGROUND CONTAINER-->
    <div id="h-s-b-container">

        <!--HEADER-->
        <div id="header">
            <div class="container">
                <div id="topleft">
                    <h2>Fleet/Facilities Management & Consultancy</h2>
                </div>
                <div id="topright">
                    <h2>N/A</h2>
                </div>
            </div>
        </div>

CSS:

.container{
    width:80%;
    margin:auto;
    overflow:hidden;
}

#header{
    color:#ffffff;
    padding-top:10px;
    padding-bottom:10px;
    min-height:70px;
    border-bottom:#ffffff 2px solid;
}

#topleft{
    text-align:center;
    float:left;
}

#topright{
    text-align:center;
    float:right;
    padding: 0 0 0 50px;
}

    #content,
    #topleft,
    #topright{
        float:clear;
        text-align:center;
        width:100%;
    }

P.S:抱歉代码量太大，下次我会选择使用 Pastebin 等服务。

没有任何错误消息，因为问题出在 CSS 中。正如您从上面的图片中看到的那样，我希望表单在页面中间居中，但它一直向右浮动。

Answer 1

我没有检查过，但乍一看，您似乎没有为 .contact-form 分配媒体查询。

更简单的方法是将它包装在容器 div 中，然后应用 display: flex 然后在媒体查询中添加 flex-direction: column 然后添加justify-content: center.

这应该是获得我认为您想要的结果的最佳方式。