我如何封装在UL CSS菜单周围的内容，所以内容是无缝的？ [英] How can I wrap content around a UL CSS Menu so content is seamless?

问题描述

感谢您的帮助

以下是IE，Firefox，Safari和Chrome的完整代码：
http://jsbin.com/eyoda4

---

I创建了一个简单的CSS UL下拉菜单，因此当用户悬停在指定的链接上时，一个菜单将下拉以供用户选择一个选项。

我遇到的问题是我想让内容包裹在UL菜单上，以便UL在内容中看起来无缝/齐全，而且内容没有间断。 / p>

这是一个演示的问题和我的代码。正如您所看到的，内容不会环绕UL。

演示： http： //jsbin.com/uzidu4/

这个演示是我想要的内容包围菜单的视觉效果。

注意：此示例将不起作用，因为此示例中不存在UL - 这只是一个可视的

演示： http://jsbin.com/uzidu4/2/

解决方案

（仅在这里回答您的更新）

要在IE7中使用，您可以添加：

 < ;! -  [if IE 7]> 
< style> 
 .inline-list，ul.program-menu li {
 display：inline; 
 zoom：1 
} 
< / style> 
<！[endif]  - > 
  

---

我还建议您添加此选项以停止烦人的文字当你将鼠标悬停在下拉菜单上时跳转：

  ul.program-menu li {
 position：relative; 
 border-top：1px solid #fff; 
 border-left：1px solid #fff; 
 border-right：1px solid #fff 
} 
  

我尝试了透明，但它在IE7中略微调整了菜单）

http://jsbin.com/uzidu4/21

Thanks for your help

Here's the finished code for IE, Firefox, Safari and Chrome: http://jsbin.com/eyoda4

---

I created a simple CSS UL drop down menu, so when a user hovers over the designated link, a menu will drop down for the user to select an option.

The issue I'm having is I'd like the content to wrap around the UL menu so the UL appears seamless/flush within the content without breaks in content.

This is a demo of the issue and my code. As you can see the content doesn't wrap around the UL.
DEMO: http://jsbin.com/uzidu4/

This demo is a visual of how I'd like the content to wrap around the menu.
Note: This example won't work, because no UL is present in this example - This is just a visual
Demo: http://jsbin.com/uzidu4/2/

Thank you for your help!

解决方案

(answering only your update here)

To make it work in IE7, you can add this:

<!--[if IE 7]>
<style>
.inline-list, ul.program-menu li {
  display: inline;
  zoom: 1
}
</style>
<![endif]-->

---

I also recommend adding this to stop the annoying text jump when you hover over the drop down:

ul.program-menu li {
    position : relative;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff
}

(I tried transparent, but it screwed up the menu slightly in IE7)

http://jsbin.com/uzidu4/21

这篇关于我如何封装在UL CSS菜单周围的内容，所以内容是无缝的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！