Question

我是这一切的新手。我无法将导航栏与徽标对齐，因为由于某种原因，边缘 - 顶部/底部似乎无法正常工作。

<HTML>
<HEAD>
    <link href="style.css" rel="stylesheet">
</HEAD>
<BODY>
    <div class="nav_header" "nav">
        <ul>
            <img src="assets/logo2.png" class='title'>
            <li><a href="default.asp">Home</a></li>
            <li><a href="news.asp">News</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">About</a></li>
        </ul>
    </div>
</BODY>

这是CSS代码

body {
    background-image: url('assets/bg.png');
    background-repeat: repeat;
}    

a:link, a:visited {
    color: gray;
    font-weight: normal;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: white;
}

.nav {
    list-style-type: none;
    height: 60px;
    background-color: #000000;
}

.nav_header {
    height: 60px;
    background: #000000 left no-repeat;
}

.title {
    margin-left: 80px;
}


li {
    display: inline-block;
    margin-left: 40px;
    margin-bottom: 40px;
    font-size: 20;
    float: none; 
}

Answer 1

尝试将图片打包在<li></li>标签中，然后管理图片尺寸。

Answer 2

您的代码应如下所示：

<div class="nav_header" "nav">
<div class="logo">
 <img src="assets/logo2.png" class='title'>  
 </div>
<ul>

<li><a href="default.asp">Home</a></li>    
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>

添加css：

.nav_header ul, .nav_header ul li, .nav_header .logo {
float: left;
}

非常建议将高度和宽度设置为包裹图像的div。

Answer 3

尝试将<img />标记放在<ul><ul>之外，但仍在<div><div>内，然后浮动<li><li>并留下图像。

Answer 4

经过一番猜测，你真正想要实现的目标...... 您可以使用CSS vertical-align：

vertical-align: middle;

然后，如果需要，您还可以使用margin-bottom进一步对齐它们。

DEMO

Answer 5

在<li>代码

中添加img

a:link, a:visited {
    color: gray;
    font-weight: normal;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: white;
}

.nav_header {
    height: 60px;
    list-style-type: none;
    background-color: #000000;
    display:block;
}

.title {
    margin-left: 80px;
}


li {
    display: inline-block;
    margin-left: 40px;
    margin-bottom: 40px;
    font-size: 20px;
    float: none; 
}

li img {
  border:10px solid #333;
  
}

<div class="nav_header">
<ul>
<li><img src="assets/logo2.png" class='title'></li>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>

Answer 6

请参阅JSfiddle：

<div class="nav_header nav">
    <img src="https://s.w.org/about/images/logos/wordpress-logo-32-blue.png" class="title" height="32" width="32" />    
    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</div>

CSS：

.nav_header {
    height: 34px;
    padding:13px 0 13px 20px;
    background: #000000 left no-repeat;
}

.nav_header > ul, 
.nav_header > img{display:inline-block; vertical-align:middle; margin:0; padding: 0;}

li {
    display: inline-block;
    margin-left: 40px;
    font-size: 20;
}

从语义上讲，您希望将图像从无序列表中拉出来。如果将img和ul都设置为内联块，则可以将它们彼此对齐。通过补偿某些填充（顶部和底部）的导航高度，我将图像和导航垂直居中到您的标题。

关于上述代码的一些注意事项：

可以是ul和ol的直接后代的唯一元素是li。如果您要将img添加到列表中，则必须将其包含在li中。
需要在同一双引号中包含多个类，请参阅nav_header和nav。
始终在图片代码上声明height和width属性。
在编写HTML时，为了使用单个双引号作为属性值（请参阅title类）和大写和小写HTML标记，请保持一定的标准。

如何将导航栏与徽标对齐？

6 个答案: