Question

我正在制作一个将音乐作为课程项目销售的网站。我做了一个水平导航栏，但是当我调整窗口大小时...它变得混乱。 PICS：我的笔记本电脑全屏： http://i.imgur.com/86iazhM.png 调整大小：

继承我的代码吧： css部分

 span{}
.bar{
display:inline;
padding:2.5cm;
}

#top{
background-color:#000000;
padding:16px;
}

#top a{
text-decoration: none;
color:white;
}

#top a:hover{
background-color:#FF9900;
}

继承人的HTML部分：

<span id="top">
<li class="bar"><a href="">HOME</a></li>
                        <li class="bar"><a href="">DOWNLOAD</a></li>
                        <li class="bar"><a href="">POPULAR</a></li>
                        <li class="bar"><a href="">CONTACT</a></li>
                        <li class="bar"><a href="">CONNECT</a></li>
    </span>

我该如何解决这个问题？

问题2）如何在垂直导航栏旁边显示图像？当我浮动时：右边的图像，它向右移动，但它在导航栏下方，而不是在它旁边。非常感谢！

Answer 1

问题1 尝试使用

.bar{
   display:inline-block;
   padding:2.5em;
 }

Q2 附加图片你可以使用background-image:或伪元素:before

Answer 2

 .bar{
       display:inline-block;
       padding:5px;
      width:19.233333%;
      border:1px solid red;
      float:left;
      position:relative;
  }

Answer 3

你在span下使用了li标签是不正确的。 li应该始终在ul标签内。创建菜单的最佳方法如下：

<!doctype html>
<html>
<head>
<style type="text/css">
ul.header{
    background-color:#000000;
    list-style:none;
    float:left;
    padding:0;
    margin:0;
    padding:16px;
}
ul.header li{
    float:left;
    display:inline;
    padding:10px 20px;
}
ul.header li a{
    text-decoration: none;
    color:white;
}
ul.header li a:hover{
    background-color:#FF9900;
}
ul.vertical-nav {
    float:left;
    clear:both;
    list-style:none;
}
ul.vertical-nav li {
    padding:5px 10px;
}
ul.vertical-nav li img {
    margin:0 5px;
    border:1px red solid;
}
ul.vertical-nav li a {
    text-decoration:none;
}
</style>
</head>
<body>
    <ul class="header">
        <li><a href="">HOME</a></li>
        <li><a href="">DOWNLOAD</a></li>
        <li><a href="">POPULAR</a></li>
        <li><a href="">CONTACT</a></li>
        <li><a href="">CONNECT</a></li>
    </ul>
    <ul class="vertical-nav">
        <li><a href="">HOME</a><img src="icon.png"></li>
        <li><a href="">DOWNLOAD</a><img src="icon.png"></li>
        <li><a href="">POPULAR</a><img src="icon.png"></li>
        <li><a href="">CONTACT</a><img src="icon.png"></li>
        <li><a href="">CONNECT</a><img src="icon.png"></li>
    </ul>
    <img style="float:left;" src="image.png" />
</body>
</html>

Ans 2）您可以为图像标记/图像容器添加float：left，使其位于垂直菜单旁边。（请注意，垂直菜单也应该有float：left属性。）

当我调整窗口大小时，水平导航栏会混乱

3 个答案: