Question

下面发布我的jsp页面。针对home.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 的style.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;
}

运行此代码后，标题和菜单标签之间存在一些差距。我无法对其进行调整。如何消除这种差距？如何正确对齐？

Answer 1

删除菜单类的边距

.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正确对齐

1 个答案: