gpt4 book ai didi

html - 如何将一个元素定位在父div的右侧?

转载 作者:行者123 更新时间:2023-12-02 21:18:06 24 4
gpt4 key购买 nike

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

navigation bar

但是正如您所看到的,登录按钮在主体中下沉了一点。它应该与其他按钮位于同一行。我尝试在父 div (navUl) 上执行 positionrelative 操作,并在元素中执行 positionabsolute + right:0 操作。我也尝试在元素上 float ,但它们都给了我相同的结果。

到目前为止我的代码:

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 {
}

感谢您的阅读。

最佳答案

如果没有 fiddle ,这有点困难,但请尝试一下。

更新了 HTML 以将 anchor 标记放入 <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。基本上我们 float <ul>并给它一个 100% 的宽度,然后 float <li>左边,除了 float 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;
}

关于html - 如何将一个元素定位在父div的右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29268125/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com