[英]How to make an element (<a>) stretch to the full width of its parent element (container)?
I made a responsive menu: 我做了一个响应式菜单:
http://jsfiddle.net/7vmCZ/2/ http://jsfiddle.net/7vmCZ/2/
<ul id="nav">
<li>Menu 1
<ul>
<li><a href="/">Menu 111</a></li>
<li><a href="/">Menu 22</a></li>
<li><a href="/">Menu 3333</a></li>
<li>Menu 44
<ul>
<li><a href="/">Menu 111111</a></li>
<li><a href="/">Menu 22</a></li>
<li><a href="/">Menu 3333</a></li>
<li><a href="/">Menu 44</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/">Menu 2222</a></li>
<li>Menu 33<ul><li>This submenu should be under Menu33</li></ul></li>
<li><a href="/">Menu 4444444</a></li>
</ul>
a
{
background-color: red;
}
#nav {
display:table;
}
#nav > li {
list-style:none;
padding:0px 10px 0px 10px;
border:1px #000 solid;
position:relative;
display:table-cell;
width:1%;
}
#nav ul li {
width: 100%;
display:block;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#fff;
position:relative;
white-space:nowrap;
}
ul {
display:none;
}
li:hover > ul {
display:block;
position:absolute;
z-index:1000;
border:1px #000 solid;
}
ul#nav > li:hover > ul {
margin-left: -10px;
}
#nav > li ul li ul {
left:100%;
top:-2px;
white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
color:#fff;
background:#000;
}
li, li a {
color:#000;
text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}
the problem is, the menus are clickable, and the tag wont fit all its container (thats why I highlighted with red color). 问题是,菜单是可单击的,并且标签无法容纳其所有容器(这就是为什么我用红色突出显示的原因)。 How to dodge it?
如何躲闪呢?
a {
display: block;
}
Possibly add width: 100%;
可能添加
width: 100%;
also, 也,
<a>
elements are display: inline
by default, so the width will only be as wide as the text and any padding added to the element. display: inline
<a>
元素display: inline
默认为display: inline
,因此宽度将仅与文本和添加到该元素的任何填充一样宽。 display: block
will make it take up the available width. display: block
将占用可用宽度。
In case you still have problems, don't forget about the parent element's padding. 如果仍然有问题,请不要忘记父元素的填充。 The child can only take up as much space as is available to it.
孩子只能占用可用的空间。 The parent padding may prevent it from stretching all the way to the edge of the parent.
父填充可能会阻止其一直延伸到父边缘。 This will also be the case with the element's margin.
元素的边距也是如此。 If the
a
tag here has a margin, this will put space around it. 如果此处
a
标签有空白,则会在其周围留出空间。
li {
text-align:center;
}
a
{
background-color: red;
display:block;
}
For the filled BG, use display:block;
对于填充的BG,请使用
display:block;
For the alignment, target your li
items. 为了对齐,以
li
项目为目标。
If you just want your top level list items centered, use a basic text-align
on all li
items, then a psuedo class
to direct descendants of your ul#nav
. 如果只想让顶级列表项居中,请对所有
li
项目使用基本的text-align
,然后使用psuedo class
指导ul#nav
后代。
ul#nav li {
text-align:left;
}
ul#nav > li {
text-align:center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.