Bootstrap CSS - 列表旁边的浮动图像

Question

我试图让图像漂浮在无序列表旁边。

我有以下HTML：

<header id="header">
    <div class="container">
        <div class="row">
             <div class="col-md-1"><img id="droid-logo" alt="" src="/templates/notthedroidyouarelookingfor/images/ntdyalf-logo.png"></div>
              <div class="col-md-2"><ul class="nav menu nav-pills">
<li class="item-101 current active"><a href="/">Home</a></li>
<li class="item-102"><a href="/index.php/about-us">About</a></li>
<li class="item-106"><a href="/index.php/contact-us">Contact Us</a></li>
<li class="item-114"><a href="/index.php/troubleshooting">Troubleshooting</a></li></ul>
</div>
                        </div>

                    </div>
                </header>

我的CSS：

  

droid-logo {

float: left;
height: 20%;
margin: 10px;
width: 20%; }

     

标题ul.menu {

border-radius: 4px 4px 0 0;
display: block;
float: right;
margin: 0 10px;
padding: 0;
text-align: left;
width: 70%; }

实际网站在这里： http://notthedroidyouarelookingfor.com/

我不明白为什么图像在菜单下面。

Answer 1

<ul class="nav menu nav-pills">具有css属性position: absolute;。

这可以防止菜单浮动。

尝试使位置相对，然后使用float再次尝试（也许你必须向左浮动菜单）。