css - Bootstrap CSS - 在列表旁边 float 图像

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%; }

header 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 。

尝试使位置相对，然后使用 float 重试(也许您必须将菜单向左浮动)。