1

我对 HTML/CSS 比较陌生，并且很难将两张图片与 ASP MVC 网站对齐。我们用于菜单栏的书挡图片无法与其余的背景图片对齐。下面是问题的屏幕截图，HTML 和 CSS。未正确调整的书挡图片为 NAV-Left-Corner，CSS 中的 id 为“#menuLeft”。导航栏的其余部分使用水平重复的蓝色小图片。CSS 的那部分可以在“ul#Menu”部分找到。（我对正确的书挡也有同样的问题，只是想为了这篇文章而简化一些事情）

行外菜单图片

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;

    }
4

1 回答 1

0

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

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

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。应用程序“仅供内部使用”不需要花哨的效果。

阅读有关 CSS 的优秀教程并在工作中使用它之前进行一些练习（定位、渐变、浏览器支持）:)

新波士顿是一个非常好的网站，拥有我见过的最专业的免费课程和教程。

于 2013-01-20T02:19:49.147 回答