如何将一个元素定位在父 div 的右侧？答案

【问题标题】：How to position one element at the right side of the parent div?如何将一个元素定位在父 div 的右侧？
【发布时间】：2015-03-25 23:01:38
【问题描述】：

我正在为我的网站制作导航栏。 nav 的最后一个元素应该在父 div 的右侧。（这是登录按钮）。

但是正如您所看到的，登录按钮在正文中下沉了一点。它应该与其他按钮在同一行。我尝试在父 div (navUl) 上执行 position relative，并在元素中执行 position absolute + right:0。我也尝试在元素上浮动，但它们都给了我相同的结果。

到目前为止我的代码：

html

<body>
        <div class="header">
            <div class="nav">
                <img class="logo" src="images/WEBSHOPlogo.png">
                <div class="lining">
                    <ul class="navUl">
                        <a href="index.html"><li class="currentNavLiHome"> <img class="homeButton" src="images/home-icon.png" alt="home"></li></a>
                        <a href="games.html"> <li class="navLi">producten</li></a>
                        <a href="info.html"> <li class="navLi">informatie</li></a>
                        <a href="admin.html"><li class="navLiLogin"> <img class="adminButton" src="images/icon-user.png" alt="admin"></li></a>
                    </ul>
                </div>
            </div>
        </div>
    </body>

css

body {
    margin: 0px;
}

.header {
    background-color: #594f4f;
}

.nav {
    height: 170px;
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.logo {
    width: 300px;
    margin-top: 50px;
}

.lining {
}

.navUl {
    margin: 0px;
    padding: 0px;
    margin-top: 61px;
    position: relative;   
}

.navLi {
    padding-top: 10px;
    padding-bottom: 1px;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 1em;
    text-transform: uppercase;
    color: #594f4f;
    display: inline;
    background-color: #45ada8;
    font-family:sans-serif; 
    clear: both; 
}

.currentNavLiHome {
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px; 
    background-color: white;
    margin-right: 5px;
    display: inline;   
    clear: both;

}

.homeButton{
    width: 20px;
}

.adminButton{
    width: 20px;
}

.navLiLogin {
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: white;    
    display: inline;
    float: right;


}

.navUl a {
    list-style-type: none;
    text-decoration: none;
}

.loginPosition {
}

感谢阅读。

【问题讨论】：

您能提供一个小提琴以便调试吗？
是的，我可以。第一次使用小提琴，它似乎与我的结果不同。 jsfiddle.net/n6u307ky
这个 Stack Overflow 可能会有所帮助 stackoverflow.com/questions/5198563/…

标签： html css position nav

【解决方案1】：

没有工作的小提琴有点困难，但试一试。

更新了 HTML 以将锚标记放在 <li> 中，因为这是更好的语法：

HTML：

<body>
 <div class="header">
      <div class="nav">
           <img class="logo" src="images/WEBSHOPlogo.png">
           <div class="lining">
                <ul class="navUl">
                     <li class="currentNavLiHome"><a href="index.html"><img class="homeButton" src="images/home-icon.png" alt="home"></a></li>
                     <li class="navLi"><a href="games.html"> producten</a></li>
                     <li class="navLi"><a href="info.html"> informatie</a></li>
                     <li class="navLiLogin"><a href="admin.html"><img class="adminButton" src="images/icon-user.png" alt="admin"></a></li>
                </ul>
           </div>
      </div>
 </div>
</body>

更新了 CSS。基本上我们将<ul> 浮动并给它100% 的宽度，然后将<li> 向左浮动，除了li:last-child 向右浮动。另外，从<li> 中删除clear:both，以便它们保持内联。

CSS：

.nav ul {
     float: left;
     width: 100%;
}
.nav ul li {
     float: left;
}
.nav ul li:last-child {
     float: right;
}

.navLi {
    padding-top: 10px;
    padding-bottom: 1px;
    padding-left: 25px;
    padding-right: 25px;
   margin-left: 10px;
     margin-right: 10px;
    font-size: 1em;
    text-transform: uppercase;
    color: #594f4f;
    display: inline;
    background-color: #45ada8;
    font-family:sans-serif;
}

.currentNavLiHome {
    padding-top: 10px;
    padding-bottom: 2px;
    padding-left: 15px;
    padding-right: 15px; 
    background-color: white;
    margin-right: 5px;
    display: inline;
}

【讨论】：

【解决方案2】：

尝试在 CSS 代码中使用 float:right;。另外我认为，如果你给包含链接的 div（你可以创建它）的宽度为 90%，并给包含登录的 div 的宽度为 10%，例如，这将是一个上帝的解决方案。

【讨论】：

【解决方案3】：

 <body>
            <div class="header">
                <div class="nav">
                    <img class="logo" src="images/WEBSHOPlogo.png">
                    <div class="lining" class="login" <!-- give it width="90%" -->>
                        <ul class="navUl">
                            <a href="index.html"><li class="currentNavLiHome"> <img class="homeButton" src="images/home-icon.png" alt="home"></li></a>
                            <a href="games.html"> <li class="navLi">producten</li></a>
                            <a href="info.html"> <li class="navLi">informatie</li></a></ul>

<div class="login" <!-- give it width="10%" --> ><a href="admin.html"> <img class="adminButton" src="images/icon-user.png" alt="admin"></li></a></div>

                    </div>
                </div>
            </div>
        </body>

【讨论】：

使第一个链接宽度为 90%，最后一个必须为 10%。在浮动它们时也可以工作，感谢您的帮助。