Question

我对HTML / CSS比较陌生，我不可能在两个图片中与ASP MVC网站对齐。我们用于菜单栏的书挡图片不能与其余的背景图片对齐。下面是问题的截图，HTML和CSS。没有正确调整的书挡图片是NAV-Left-Corner，它在CSS中的id是“#menuLeft”。导航栏的其余部分使用水平重复的小蓝色图片。 CSS的那部分可以在“ul＃Menu”部分找到。（我对右边的书挡有同样的问题，只是想为了这个帖子简化一些事情）

Out of line menu pic

HTML

    <body>
    @using Monet.Common


            <div class="page">
                <header>            
                <div style="margin: 20px;">
    @*                <a href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </a>*@
                    <span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
                    <span style="color: white; font-size: 18px; ">&nbsp;&nbsp; </span>
                </div>
    @*            </a>*@
    @*            <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>*@
                    <nav>                               
                        <ul id="menu">     
                            <img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
                            <li id="mTop">@Html.MenuLink("Agents", "Index", "Agent")</li>
                            <li class="mProducts">@Html.MenuLink("Products", "Index", "Product")</li>
                            <li class="mPt">@Html.MenuLink("Product Training", "Index", "Course")</li>
                            <li class="mCe">@Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
                            <li id="mBottom">@Html.MenuLink("Help", "About", "Home")</li>                        
                            <img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
                         </ul>                    
                    </nav>
            </header> 
            <img src="../../Content/images/TEST2body_top.png"  id="topPic" alt="tag"/>       
                <section id="main">            
                @RenderBody()
            </section>
            <footer>
                <span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
            </footer>
            </div>
    </body>

CSS

    ul#menu {
        /*border-bottom: 1px #5C87B2 solid;*/
        background-image: url('../../Content/Images/Nav-Background.gif');
        background-position:center;
        background-repeat:repeat-x;
        padding: 0 0 2px;
        position: relative;
        margin: 0;
        text-align: right;
    }

    #menuLeft
    {
        vertical-align:middle;
    }

    #menuRight
    {
        vertical-align:middle;

    }

Answer 1

我同意尼罗的评论（“不要这样做”）。

无论如何 - 您可以通过添加一些填充或边距来向上或向下移动任何内容。您还可以使用负填充顶部，即使在容器外也可以向上移动图像。

ul#menu {
    /*border-bottom: 1px #5C87B2 solid;*/
    background-image: url('../../Content/Images/Nav-Background.gif');
    background-position:center;
    background-repeat:repeat-x;

    /* HERE */
    padding: -5 0 2px; 

    position: relative;
    margin: 0;
    text-align: right;
}

我不确定这是否适合你，但它可能是关于定位物品的好建议。

稍后编辑/添加：

也许你不应该像这样在认真的应用程序中试验CSS。 App“仅供内部使用”不需要花哨的效果。

阅读关于CSS的好教程并在工作中使用之前进行一些练习（定位，渐变，浏览器支持）：）

The New Boston是一个非常好的网站，提供了我见过的最专业的免费课程和教程。

使用HTML / CSS移动图片

1 个答案: