gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:13:54 24 4
gpt4 key购买 nike

我想让一张图片漂浮在一个无序列表的旁边。

我有以下 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/

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

最佳答案

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

这可以防止菜单 float 。

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

关于css - Bootstrap CSS - 在列表旁边 float 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26382328/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com