Question

我实际上尝试浮动列表和div容器，这两个元素在同一行上。如果我尝试使用两个div容器的（jsfiddle.net/a4cfgkwj/1/）中的代码，一切都很好，但如果我用一个列表替换一个div，则容器名为＆＃34; facebook＆＃34;不会像我一样浮出水面。如何将此容器与菜单栏放在同一行？

HTML

<div class="headline">          
    <ul class="navbar">
         <li><a href="#">Home</a></li>
         <li><a href="#">Team</a></li>
         <li><a href="#">Info</a></li>
         <li><a href="#">Downloads</a></li>
    </ul>
    <img class="facebook" src=""/>
    <div id="clear"></div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
.headline {
    height: 60px;
    width: 100%;
    background-color: black;
    margin-top: 10px;;
}
.headline .navbar {
    margin: 0px;
    padding: 0px;   
    padding-left: 10px;
    padding-right: 10px;    
    float: left;
    width: auto;
    height: 60px;
    background-color: yellow;
    list-style: none;
}
.headline .navbar li {
    display: inline;
}
.headline .navbar li a {
    text-decoration: none;
    line-height: 60px;
    padding-left: 10px;
    padding-right: 10px;
}
.headline .facebook {
    width: 60px;
    height: 60px;
    margin-right: 5%;
    float: right;
}
#clear {
    clear: both;
}

Answer 1

您的问题是您有很多不匹配的HTML标记。

这里有效： http://jsfiddle.net/ur1xrd1c/

＆＃13;

* {
    margin: 0px;
    padding: 0px;
}
.headline {
    height: 60px;
    width: 100%;
    background-color: black;
    margin-top: 10px;
    ;
}
.headline .navbar {
    margin: 0px;
    padding: 0px;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    width: auto;
    height: 60px;
    background-color: yellow;
    list-style: none;
}
.headline .navbar li {
    display: inline;
}
.headline .navbar li a {
    text-decoration: none;
    line-height: 60px;
    padding-left: 10px;
    padding-right: 10px;
}
.headline .facebook {
    width: 60px;
    height: 60px;
    margin-right: 5%;
    float: right;
}
#clear {
    clear: both;
}

＆＃13;

<div class="headline">
     <ul class="navbar">
         <li><a href="#">Home</a></li>
         <li><a href="#">Team</a></li>
         <li><a href="#">Info</a></li>
         <li><a href="#">Downloads</a></li>
     </ul>
     <img class="facebook" src="">
     <div id="clear"></div>
</div>

＆＃13;

在CSS中的同一行中浮动列表和div容器？

1 个答案: