Question

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

navigation bar

但正如您所看到的那样，登录按钮会向身体投入一点点。它应与其他按钮位于同一行。我尝试在父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

如果没有工作小提琴，这有点难度，但是请试一试。

更新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。另外，从clear:both中删除<li>，以便它们保持内联。

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 2

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

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的右侧放置一个元素？

3 个答案: