使用CSS在导航栏内定位我的徽标
使用CSS在导航栏内定位我的徽标
提问于 2016-07-20 19:25:48
我找不到一些教程可以帮助我将响应式导航栏与徽标对齐。
对不起，我只是在HTML和CSS的新手，并试图创建一个网站，也许你可以帮助我这一点通过正确的定位？你能提供一个链接，帮助我在整个旅程中建立一个响应式的网站吗？非常感谢你..
下面是html：
<!DOCTYPE html>
<html>
<title>Office the Naval Adjutant</title>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<nav>
<ul>
<li><img src="logoweb.png"></li>
<li><a href='#'>ADMIN</a></li>
<li><a href='#'>MILITARY ASSISTANCE</a></li>
<li><a href='#'>RECORDS</a></li>
<li><a href='#'>PUBLICATION</a></li>
<li><a href='#'>GALLERY</a></li>
</ul>
</nav>
</body>
</html>CSS：
#logo {
position:absolute;
left:0%;
}
* {
padding: 0;
margin: 0;
}
nav{
background-color: #233647;
text-align: right;
padding: 20px;
}
nav li {
display: inline-block;
margin: 0 8px;
padding-top: 1px;
}
nav li a{
color: white;
padding: 11px;
text-decoration: none;
font-family: arial;
}
nav li a:hover{
background-color: white;
color: #233647;
}它看起来是这样的：
但我想要这样的输出(我be了它)，它应该是响应性的：
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-20 19:32:57
在将#logo分配给image之前，将其添加到您的#logo中并尝试。根据您的徽标大小重置高度和宽度。
#logo{
position:absolute;
top:10px;
left:10px;
width:40px;
height:40px;
overflow:hidden;
}
<li>
<img src="https://source.unsplash.com/random" id="logo"></li>
<li>Stack Overflow用户
发布于 2016-07-20 19:39:15
你可以使用bootstrap来使你的网站响应，他们已经定义了所有的类，你只需要使用它们。根据需要使用导航栏进行引导链接
1看看这个..！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38479979
复制相关文章
相似问题
腾讯云开发者
