.net 位置a<；导航>；在a<；部门>；_.net_Html_Nav

.net 位置a<；导航>；在a<；部门>；

.net html

.net 位置a<；导航>；在a<；部门>；,.net,html,nav,.net,Html,Nav,有人能给我解释一下如何在a的底部移动a吗！我真不敢相信我正在努力做一件我认为很简单的事情我正在使用.net中提供的mvc模板（html5），下面是代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="~/favicon.ico"

有人能给我解释一下如何在a的底部移动a吗！我真不敢相信我正在努力做一件我认为很简单的事情

我正在使用.net中提供的mvc模板（html5），下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left" style="border: 2px solid red">
                <p class="site-title">
                    @Html.ActionLink("My website", "Index", "Home")
                </p>
            </div>
            <div class="float-right" style="border: 2px solid red;">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>
                    &copy; @DateTime.Now.Year - MyWebsite.com</p>
            </div>
        </div>
    </footer>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>


@视图包。标题
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）

@ActionLink（“我的网站”、“索引”、“主页”）

@Html.Partial（“_LoginPartial”）

@ActionLink（“主页”、“索引”、“主页”）
@ActionLink（“关于”、“关于”、“主页”）
@ActionLink（“联系人”、“联系人”、“主页”）

@渲染部分（“特色”，必填项：false）
@RenderBody（）

&抄袭@DateTime.Now.Year-MyWebsite.com
@Scripts.Render（“~/bundles/jquery”）
@RenderSection（“脚本”，必需：false）

虽然没有在上面的代码中显示，但我的div的高度将是101px，我希望导航菜单显示在div内部右侧的底部，但我已经尝试在site.css中使用各种设置并使用内联样式，正如我所说的，我无法让它显示在我想要的位置！我还在谷歌上搜索，但希望有人能为我找到解决方案。我在这上面花了太多时间了

谢谢。


<div style="border: 2px solid red;float:right;">
           <nav>
                <ul id="menu">
                    <li>Home</li>
                    <li>about</li>
                    <li>contact</li>
                </ul>
            </nav>
        </div>


家
关于
接触

看看这个：工作示例：

首先，我给出了div的相对位置。然后我将导航向右侧浮动，给出绝对位置和底部：0，右侧：0

HTML:

我不明白，我试过你的建议，但我想我没有正确地解释我自己。我想将导航（水平布局）移动到包含它的div的底部。这次让我们用链接再试一次。我上传了一个快照，希望它能澄清我想要实现的目标。检查一下，这对我不起作用。jsfidlle在IE中似乎不起作用，当我尝试使用它时，它并不能满足我的需要。也许我没有正确地解释自己，但我基本上希望导航水平显示，但在div的底部，它包含在其中。通过引入一张桌子，我成功地实现了我想要的，但我不知道这是否是一个好的练习。我本希望不用桌子就可以做到这一点。哎呀！我回来了！！这工作做得很好！谢谢当我点击你的链接时，它使用了错误的代码。。。奇怪的不管怎样，我刚刚在.net中直接试用了你的代码，它在Chrome和IE中都能立即运行。谢谢！

<div id ="div1" >
        Here is a div with height 101px

        <nav>
           <a href="http://www.google.com/">Google</a> |
           <a href="http://www.bing.com/">Bing</a>
        </nav>  
</div>

#div1 {
   position:relative;
   height:101px;
   width:100%;
   border:2px solid black;
}


#div1 nav {


float:right;
position:absolute;
bottom:0;
right:0;

}