使用CSS将我的徽标定位在导航栏中

时间：2016-07-20 11:25:48

标签： html5 css3 navigationbar

我找不到一些可以帮助我将响应式导航栏与徽标对齐的教程。

抱歉，我只是HTML＆amp; 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;
}

看起来像这样：

enter image description here

但我想要像这样的输出（我照片），这应该是响应：

enter image description here

2 个答案:

答案 0 :(得分：1)

您可以使用引导程序来使您的网站响应，他们已经定义了您必须使用它们的所有类。 [根据需要使用导航栏进行自举链接]

[1] http://startbootstrap.com/template-overviews/freelancer/ 检查一下..！

答案 1 :(得分：0)

将此添加到#logo并尝试，然后再将#logo分配给image。根据您的徽标大小重置高度和宽度。

#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>
相关问题
最新问题