好的，所以我有一个带有基本样式表的基本标题导航栏(下面的代码)。在这个标题下，我包含了一个表格。现在这只是我在练习表格，但我遇到了一个错误。当我包含一个表单标签时，它会破坏导航栏，但似乎只是在 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/