Question

好的，我有一个带有基本样式表的基本标题导航栏（下面的代码）。在这个标题下，我已经包含了一个表格。现在这只是我练习表格，但我遇到了一个错误。当我添加表单标记时，它会破坏导航栏，但只是在Chrome中。在这里，我将展示一些照片。

使用表单标记： https://puu.sh/en5BJ/467d02010d.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%}

Answer 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;}

表单标记打破导航栏布局

1 个答案: