Question

这是我的页面：http://aasiskos.webpages.auth.gr/1905_YPA/index.php。我有CSS的问题。如果在不同的浏览器中打开网站，则菜单对齐会发生变化。我从3台不同的电脑检查过，菜单没有完全对齐。其次，当我最小化菜单时也不对齐。我该怎么办？

我使用Stylizer来更改CSS代码。这是代码：

    *
{
    margin: 0;
    padding: 0;
}
BODY
{
    margin-top: 220px;
    background: #000 url(images/button.jpg) no-repeat center top;
    color: #5E5E5E;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
}
H1, H2, H3
{
    color: #5E5E5E;
}
H2
{
    font: 1em Arial, Helvetica, sans-serif;
    font-size: 11px;
}
H3
{
    font-size: large;
    color: #F00;
}
P, BLOCKQUOTE, UL, OL
{
    margin-bottom: 1.4em;
    line-height: 1.8em;
    text-align: inherit;
}
P
{
}
BLOCKQUOTE
{
    margin-left: 2em;
    margin-right: 2em;
    font-style: italic;
}
UL
{
    /*[empty]margin-left:;*/
}
UL LI
{
}
OL
{
    /*[empty]margin-left:;*/
}
OL LI
{
}
A
{
    text-decoration: none;
    color: #5E5E5E;
}
A:hover
{
    text-decoration: underline;
}
/*Boxed Style*/
.boxed
{
    margin-bottom: 20px;
}
.boxed .content
{
    padding: 15px;
    margin-left: -11px;
}
/*Post*/
.post
{
    /*[empty]margin:;*/
}
.post .title
{
    padding: 10px 0;
    font-size: 1.6em;
    font-weight: normal;
}
.post .story
{
    padding: 10px;
    margin-left: -7px;
    margin-top: 5px;
}
/*Header*/
#header
{
    height: 61px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
/*Header > Logo*/
#logo
{
    width: 700px;
    height: 19px;
    margin: 0 auto;
    padding: 6px 0 0;
}
#logo H1, #logo H2
{
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}
#logo H1
{
    float: left;
}
#logo H2
{
    float: right;
}
#logo A
{
}
/*Header > Menu*/
#menu
{
    width: 1100px;
    height: 27px;
}
#menu UL
{
    /*[empty]margin-left:;*/
    padding: 7px 0 0;
    list-style: none;
}
#menu LI
{
    display: inline;
}
#menu A
{
    display: block;
    float: left;
    height: 30px;
    margin: 0 2px 0 0;
    padding: 2px 25px 0;
    background: url(#FFFFF) repeat-x;
    border: 1px solid #014995;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #014995;
}
#menu A:hover
{
    background-image: url(images/13.jpg);
    text-decoration: none;
    color: #E5E5E5;
}
#menu .active A
{
    background-image: url(images/12.jpg);
}
/*Wrapper >Font*/
#fonts
{
    font-family: "Arial Black", Gadget, sans-serif;
    color: #5E5E5E;
}
/*Centre Wrapper*/
#wrapper
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
/*Content*/
#content
{
    width: 60px;
    padding: 50px 0 0;
}


#login INPUT
{
    margin-bottom: 5px;
    padding: 2px 5px;
    border: 1px solid #385B88;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
#inputtext1, #inputtext2, #inputtext3
{
    color: #014995;
}
#inputsubmit1
{
    background: #385B88;
    color: #FFFFFF;
}

Answer 1

鉴于它看起来不像设计流畅或响应，这是一个非常简单的修复。只需添加“margin-right：-10px;”到#menu的样式规则。这会将菜单移到它应该开始的位置。

换句话说：

#menu {
   margin-right: -10px;
}

CSS菜单对齐在不同的浏览器中不稳定

1 个答案: