个人中心
gpt4 book ai didi

html - CSS/HTML
破坏了 chrome 中的布局

转载 作者：太空宇宙 更新时间：2023-11-04 12:59:43 29 4
gpt4 key购买 nike

我制作了一个“联系我们”页面，用户应在其中填写表格，当然还要提交/发送表格。现在，事情是我添加 <form>...</form> 的那一刻标记布局中断。它似乎只发生在 chrome 中(还不是 100% 肯定)。

然而，令人惊讶的是，如果我不刷新页面，而是使用菜单(点击联系我们)布局/设计就很好。似乎问题是由 <form> 引起的标签。没有它布局/设计很好

应该怎样 That's how it SHOULD look<form> 怎么样？标签 The problem

请查看我的.css 或.html 是否有问题。

CSS.css:

body{
    background-color: #80B2E6;
    font-family: "Times New Roman", Georgia, Serif;
    font-size: medium;
    padding: 0px;
}

nav{
    height:3.5em;
}

#Content{
    padding:10px;
    width: 580px;
    margin-left: auto;
    margin-right: auto;
    background-color:#B89470;
}

#Content h2{
    text-align:center;
    display: block;
}

#Menu{
    background-color:#AD855C;
    display: block;
}

#Header{
    background-color:#AD855C;
    width: 600px;
    margin: 0 auto;
}

#Logo{
    background-image:url('Library/Misc/LogoBG.jpg');
    background-size: 100% 100%;
    height:100px
}

#Logo h2{
    text-align:center;
    vertical-align:middle;
}

.Line{
    margin:0;
    padding:0;
    height: 3.5em;
    border-right: 2px solid #000000;
    float:left;
    display: inline-block;
}

a.MMLink{
    text-decoration: none;
    background-color:#AD855C;
    height: 1.5em;
    padding: 1em;
    display:inline-block;
    float: left;
}

a.MMLink:hover{
    background-color: #CEB69D;
    color:black;
}
a.MMLink:link{
    color:black;
}
a.MMLink:visited{
    color:black;
}
a.MMLink:active{
    background-color: #CEB69D;
    color:black;
}

#MenuLeft{
    float: left;
    display: inline-block;
}

#MenuRight{
    float: right;
    display: inline-block;
}

.NewsFeed{
    text-decoration:underline;
    font-weight:bold;
}

.Form {
    width: 400px;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    margin:0;
    padding:0;
}

HTML Contactus.html:

<!DOCTYPE html>
<html>
    <head>
        <title>
            A page
        </title>

        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="CSS.css" />

    </head>
    <body>



        <div id="Header">
            <div id="Logo">
                <h2>  My Header </h2>
            </div>

            <nav>
                <div id="MenuLeft">
                    <a class="MMLink" href="Index.php">Home</a>
                    <div class="Line"></div>
                    <a class="MMLink" href="About.html">About</a>
                    <div class="Line"></div>
                    <a class="MMLink" href="Contactus.php">Contact Us</a>
                    <div class="Line"></div>
                </div>

                <div id="MenuRight">
                    <div class="Line"></div>
                    <a class="MMLink" href="Login.php">Login</a>
                    <div class="Line"></div>
                    <a class="MMLink" href="Signup.php">Sign-Up</a>
                </div>

            </nav>
        </div>




        <div id="Content">
            <h2>Contact us!</h2>
            <hr/>
            <p>
                That ironical, but if you've encountered a problem, a bug, or just want to contact us,
                <br/>
                please feel free to fill the next form.
            </p>

            <form>
            input fields go here
            <br/>
            </form>

            <p>some text2</p>
        </div>
    </body>
</html>

最佳答案

可能是你的花车有问题。尝试添加 clear:both至 #content :

#Content{
    padding:10px;
    width: 580px;
    margin-left: auto;
    margin-right: auto;
    background-color:#B89470;
    clear:both:
}

附带说明一下，我不会使用单独的 div为您的垂直分隔线。尝试使用 border-left和/或 border-right在 .MMlink反而。也可以使用 border-bottom在你的 <h2>Contact Us</h2>并摆脱 <hr />

以下是我如何使用相关的 CSS 更改来整理您的 HTML:http://jsfiddle.net/kzww8fvb/

关于html - CSS/HTML <form> 破坏了 chrome 中的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25538769/

29 4 0
文章推荐： c++ - 如何在类中进行多个类型转换重载
文章推荐： linux - Samba 服务器安装过程中的问题 - 可能是权限
文章推荐： c++ - 通过排队的 Qt 信号槽连接发送 QSharedPointers 的 QVector
文章推荐： C - linux 中的进程处理任何信号
太空宇宙
个人简介

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

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