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

Question

我正在为我的网站制作一个导航栏。导航的最后一个元素应该在父元素 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 {
}

感谢阅读。

Answer 1

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

Answer 2

没有工作有点困难fiddle，但试一试。

更新 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;
}

Answer 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>

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

How to position one element at the right side of the parent div?

html

css

position

nav