个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我试图将代码保持在一分钟内，所以我创建了一个子菜单，该子菜单将根据 .sub_menu 中的 LI 数量进行扩展和收缩，例如，如果只有 5 Li 或 10，它将换行在它们周围留下 5px 的边距，即使它没有宽度属性。然而，当我将它插入主导航时，它停止工作。
无论有多少，我怎样才能使子菜单 div 环绕在 LI 周围？
<!DOCTYPE html>
<style>
/* CSS Document */
html,body{
padding:0px;
margin:0px;
height:100%;
width:100%;
background-color:#f0f0f0;
}
.sub_menu{
position:absolute;
display:inline-block;/*no need for height or width here*/
background-color:#666;
border: 1px solid red;
list-style: none;
margin:0;
padding:0;
}
.sub_menu li{
margin:10px;
display:inline-block;
}
.sub_menu li a{
display:inline-block;
background-color:#F00;
height:100px;
width:100px;
text-decoration:none;
color:#FFF;
}
</style>
<ul class="sub_menu">
<li class="auto body repair"><a href="#">1</a></li>
<li class="rental & loaner"><a href="#">2</a></li>
<li class="hail damage repair"><a href="#">3</a></li>
<li class="towing"><a href="#">4</a></li>
<li class="glass repair"><a href="#">5</a></li>
</ul>
这里当 sub_menu 被插入菜单时它停止工作
#navigation{
float:left;
width:70%;
height:100%;
margin:0;
padding:0;
}
#btmenu{
position:relative;
width:100%;
list-style: none;
margin:0;
padding:0;
height:62px;text-align:center;
}
ul#btmenu li{
padding:0;
margin:0;
display: inline;
height:62px;
width:200px;
}
#btmenu li > a{ height:62px;
line-height:62px;
margin-left:1%;
margin-right:1%;
text-align:center;
display:inline-block;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:#000;
padding-left:1%;
padding-right:1%;
text-transform:uppercase;
vertical-align: middle;
}
#btmenu > li > a:hover{
background-color:#000;
color:#FFF;
}
.sub_menu{
display:none;
}
#btmenu .sub_menu li{
}
.sub_menu li a{display:block;
background-color:#F00;
height:100px;
width:100px;margin:10px;
text-decoration:none;
color:#FFF;
}
#btmenu > li:hover .sub_menu{
display:block;/*no need for height or width using inline block intill i insert submenu into main menu*/
position:absolute;
background-color:#666;
border: 1px solid red;
list-style: none;
margin:0;
padding:0;
white-space:nowrap;
}<div id="navigation">
<ul id="btmenu">
<li class="top_quote">
<a href="services">services</a>
<ul class="sub_menu">
<li class="auto body repair"><a href="#">1</a></li>
<li class="rental & loaner"><a href="#">2</a></li>
<li class="hail damage repair"><a href="#">3</a></li>
<li class="towing"><a href="#">4</a></li>
<li class="glass repair"><a href="#">5</a></li>
</ul></li>
<li class="top_quote"><a href="locations">locations</a>
<ul class="sub_menu">
<li class="auto body repair"><a href="#">1</a></li>
<li class="rental & loaner"><a href="#">2</a></li>
<li class="hail damage repair"><a href="#">3</a></li>
<li class="towing"><a href="#">4</a></li>
<li class="glass repair"><a href="#">5</a></li>
<li class="glass repair"><a href="#">6</a></li>
<li class="glass repair"><a href="#">7</a></li>
</ul></li>
<li class="top_quote"><a href="partners">partners</a>
<ul class="sub_menu">
<li class="auto body repair"><a href="#">1</a></li>
<li class="rental & loaner"><a href="#">2</a></li>
<li class="hail damage repair"><a href="#">3</a></li>
<li class="towing"><a href="#">4</a></li>
<li class="glass repair"><a href="#">5</a></li>
<li class="glass repair"><a href="#">6</a></li>
<li class="glass repair"><a href="#">7</a></li>
</ul></li>
<li class="top_quote"><a href="our work">our work</a></li>
<li class="top_quote"><a href="contact">contact</a></li>
</ul>
</div><!--navigation--最佳答案
我认为你的问题(你所监督的)是，你的子菜单 li 继承自你的 btmenu li。
我已经创建了一个 jsfiddle 来解决你的问题(我想，这就是你想要的):https://jsfiddle.net/jn6xfx4c/
所需代码:
ul#btmenu .sub_menu li {
display: inline-block;
height: auto;
}
关于html - 如何让子菜单在没有指定宽度的情况下水平换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36700259/
26
4
0
我是一名优秀的程序员,十分优秀！