gpt4 book ai didi

html - 表格间距不正确

转载 作者:太空宇宙 更新时间:2023-11-04 11:00:14 25 4
gpt4 key购买 nike

我正在从头开始设计一个网站(使用 Grails,但这无关紧要)。我的菜单栏有问题。我的表格似乎有某种我无法删除的填充。如果加载此 HTML 和 CSS,您应该能够看到问题所在。左边是菜单栏,在它的下方,有一点缝隙。我该如何解决这个问题?

body{
margin: 0px;
}

.body {
padding:20px;
margin-top:30px;
}

.menu {
margin: 0;
padding: 0;
top: 0;
width: 100%;
position: fixed;
background-color: #333;
}

.menu ul {
list-style-type: none;
overflow: hidden;
display: inline;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
}

/* Navigation */

.menu .nav li {
float: left;
}

.menu .nav li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}

.active {
background-color: #4CAF50;
}

.menu .nav a:hover:not(.active) {
background-color: #111;
}

/* User */

.menu .login {
float: right;
}

.menu .login form {
padding-top: 10px;
padding-right: 16px;
display: inline;
}

.menu .login li {
display: inline;
}

.menu .login form li input[type="submit"]{
border: none;
background-color: #4CAF50;
}
<html xmlns:g="http://www.w3.org/1999/xhtml">
<head>
<title>
Neon Orb
</title>
<link rel="stylesheet" href="main.css" type="text/css">


<meta name="layout" content="main"/>

</head>
<body onload="">
<div class="menu">
<ul class="nav">
<li>
<a href="/" class="active">
Home
</a>
</li>
<li>
<a href="/about" class="">
About
</a>
</li>
</ul>

<ul class="login">
<form action="/user/login" method="post" name="login" id="login" >
<li>
<input type="text" name="username" placeholder="Username" value="" id="username" />
</li>
<li>
<input type="password" name="password" placeholder="Password" value="" id="password" />
</li>
<li>
<input type="submit" name="_action_Login" value="Login" />
</li>
</form>
</ul>


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

<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>

</div>
</body>
</html>

在 Chrome 上,有一个解决方法,-webkit-margin-after/before 设置为 16px,它可以被覆盖。但这在 Firefox 上不起作用。

最佳答案

首先,您的 HTML 格式不正确:form 不应位于 ulli 之间。像这样重新排序:

   <form action="/user/login" method="post" name="login" id="login" >
<ul class="login">
<li>
<input type="text" name="username" placeholder="Username" value="" id="username" />
</li>
<li>
<input type="password" name="password" placeholder="Password" value="" id="password" />
</li>
<li>
<input type="submit" name="_action_Login" value="Login" />
</li>
</ul>
</form>

然后,将此描述符添加到 CSS:

.menu form ul {
margin: 0;
}

关于html - 表格间距不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34365080/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com