gpt4 book ai didi

html - 为什么我的导航栏图片不能正常移动?

转载 作者:行者123 更新时间:2023-11-27 22:57:23 27 4
gpt4 key购买 nike

所以,我目前正在尝试为我的网站制作一个导航栏,而且效果很好!但现在我被这张无法正常移动的恼人图片困住了。

问题:我希望导航图片离页面侧面只有几个像素,但是当我使用 padding-left 时,我也移动了导航部分,但我希望它居中并且图片是一些从左边开始的像素。希望有人能帮助我

body {
margin: 0 0 0 0;
padding: 0 0 0
font: arial;
}

nav {
margin: 0;
background-color: #595959;
color: #ffffff;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;

}

nav > ul > li {
display: inline-block;
padding: 0 25px 0 50px;
}

nav > ul> li > a {
text-decoration: none;
color: white;
font-family: Roboto;
}

nav > ul> li > a:hover {
color: #c1c1c1
}

nav > .logo > img {
float: left;
padding: 0 0 0 25px;

}
<!DOCTYPE html>
<html>

<head>
<title>Branco - Home</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
<nav>
<div class="logo">
<img src="http://ikbenbranco.nl/assets/icon.png" height="60px">


</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

</body>

</html>

谢谢,布兰科

最佳答案

所以在这种情况下,如果您不希望它影响导航栏中的其他元素,则必须绝对定位它。

这是CSS:

body {
margin: 0;
padding: 0;
font: arial;
}

nav {
margin: 0;
background-color: #595959;
color: #ffffff;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
position: relative;
}

nav > ul > li {
display: inline-block;
padding: 0 25px 0 50px;
}

nav > ul> li > a {
text-decoration: none;
color: white;
font-family: Roboto;
}

nav > ul> li > a:hover {
color: #c1c1c1
}

nav > .logo > img {
position: absolute;
top:50%;
transform: translateY(-50%);
left: 10px;
}

关于html - 为什么我的导航栏图片不能正常移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54817860/

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