好的,所以我有一个带有基本样式表的基本标题导航栏(下面的代码)。在此标题下,我包括一个表格。现在只有我在练习表格,但是遇到了一个错误。当我包含一个表单标签时,它会破坏导航栏,但貌似仅在Chrome浏览器中。在这里,我将展示一些照片。

带有表单标签:
https://puu.sh/en5BJ/467d02010d.png

没有:
https://puu.sh/en5GV/a0473c44e2.png

现在,更改/断开链接已完全定位。我知道我可以用top:0来解决这个问题;但我想先找出原因。有人对此有任何想法吗?

谢谢!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Settings</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="Settings.css">
</head>
<body>
<div class="page">

    <div class="header">
    <ul>
        <li><a href="../index.html">Home</a></li><!--
        --><li><a href="../Gallery/Gallery.html">Gallery</a></li><!--
        --><li><a href="../About/About.html">About</a></li><!--
        --><li><a href="../Contact/Contact.html">Contact</a></li><!--
        --><li><a href="../Settings/Settings.html" class="active">Settings</a></li>
    </ul>
    </div>

    <div class="form">
    <form action="" method="get">
        <ul>
            <li>
                <label for="username">Enter username:</label>
                <input type="text" name="username" id="username">
            </li>
        </ul>
    </form>
    </div>

    <div class="footer">
    </div>
</div>
</body>
</html>

* {vertical-align: top;}
body {margin: 0;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
.page {width: 90%;margin: auto;}
a {color: black;display: inline-block;}

.header {
    background-color: darkgray;
    text-align: center;
    position: relative;
    margin-bottom: 1%;
}

.header ul {margin: 0;padding: 0;}
.header li {
    display: inline-block;
    line-height: 65px;
    position: relative;
    right: 10%;
}

.header a {
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 80%;
    padding: 10px 15px 0px  15px;
}
.header li:hover {background-color: white;}
.header li:last-child {position: absolute;right:0;}
.header .active {background-color: white;}
.footer {background-color: darkgray;width: 100%;height:50px;margin-top: 1%}

最佳答案

请用此CSS替换您的CSS。

* {vertical-align: top;}
body {margin: 0;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
.page {width: 90%;margin: auto;}
a {color: black;display: inline-block;}

.header {
    background-color: #A9A9A9;
    text-align: center;
    position: relative;
    margin-bottom: 1%;
    float: left;
    width: 100%;
}
.header ul {margin: 0;padding: 0;}
.header li {
    display: inline-block;
    line-height: 65px;
    position: relative;
    right: 10%;
}

.header a {
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 80%;
    padding: 10px 15px 0px  15px;
}
.header li:hover {background-color: white;}
.header li:last-child {float:right;right:0;}
.header .active {background-color: white;}
.form{float:left; width:100%}
.footer {background-color: darkgray;width: 100%;height:50px;margin-top: 1%; float:left;}

关于html - 表单标签破坏导航栏布局,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27888680/

10-13 03:18