下面是我的 jsp 页面。 主页.jsp
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<html>
<head>
<title>MindBest</title>
</head>
<style type="text/css">
<%@include file="../include/style.css"%>
</style>
<body>
<div class="container">
<div class="header" align="center">
<div class="content">
<h1>MIND BEST,DENMARK</h1>
</div>
</div>
<div class="menutab">
<div class="menu" class="blue">
<ul>
<li><a href="">Home</a></li>
<li class="active"><a href="">About Us</a></li>
<li><a href="">Products</a></li>
<li><a href="">Infrastructure</a></li>
<li><a href="">Pharmaceutical Formulations</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Search Products</a></li>
</ul>
</div>
</div>
<div class="body"></div>
<div class="footer"></div>
</div>
</body>
</html>
和CSS 样式.css
.body {
margin:0;
padding:0;
height:70%;
border-style:solid;
border-color:#38FFBE;
}
.container {
height:90%;
position:relative;
}
.header {
padding:10px;
height:42%;
border-style:solid;
border-color:#38FFBE;
text-align:center;
background-image: linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image: -o-linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image: -moz-linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image: -webkit-linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image: -ms-linear-gradient(left , #FFFFFF 22%, #4BDB1B 61%, #00FFFF 81%);
background-image:
-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0.22, #FFFFFF),
color-stop(0.61, #4BDB1B),
color-stop(0.81, #00FFFF)
);
}
.header .content{
font-family: fantasy;
font-style: normal;
font-variant: normal;
font-weight: bolder;
font-size: larger;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
text-align: center;
text-indent: 0ex;
height:90%;
background-image:url("add1-.png"),url("dancing-capsules.jpg"),url("dancing-capsules2.jpg"),url("colors3.jpg"),url("colors3.jpg"),url("colors3.jpg"),url("Flying Bird.jpg") ;
background-position:left top,left bottom,200px 0px,300px 80px,680px 80px,1060px 80px, right top;
background-repeat: no-repeat,no-repeat,no-repeat;
}
.menutab
{
height:80px;
width:100%;
border-style:none;
background-color:#00FA9A;
}
.menutab .menu{
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 140px ;
padding: 10px 10px 0px 10px;
list-style-type: none;
font-size: 13px;
background: #7FFF00;
height: 40px;
width:80%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}
.menutab .menu ul
{
margin: auto;
}
.menutab .menu li{
float: left;
margin: 0;
}
.menutab .menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
.menutab .menu li a:hover,.menutab.menu li.active a {
background-color: #CAFF70;
border-bottom: 2px solid #DDD;
color: #999;
}
.menutab .menu.blue {
border-top: 2px solid #CAFF70;
border-left: 2px solid #CAFF70;
border-bottom: 2px solid #204061;
border-right: 2px solid #204061;
background: #CAFF70;}
.menutab.menu.blue a {color: #fff;}
.menutab.menu.blue li a:hover,.menutab.menu.blue li.active a
{color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}
.body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
background-color:#38FFBE;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:80px; /* Height of the footer */
background:#38FFBE;
}
运行此代码后，标题和菜单选项卡之间会出现一些间隙。我无法对其进行调整。如何消除这个差距？ 如何正确对齐？
最佳答案
删除菜单类的边距
.menutab .menu{
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
/* margin: 50px 140px ;*/
padding: 10px 10px 0px 10px;
list-style-type: none;
font-size: 13px;
background: #7FFF00;
height: 40px;
width:80%;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}
这会很好..
关于css - 使用 css 正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10927066/