Question

我有一个使用移动菜单的移动网站，我希望li能够以100％的速度拉伸整个页面。当我设置这个菜单收缩，我无法理解为什么，max-width也被忽略，但设置px宽度不是。我已经检查过这些元素，但无法看到这个宽度的来源。

这是代码

<div id="navbar">
<nav>
<div class="miniIconPanel">
<input type="radio" name="miniMenu" id="open">
<input type="radio" name="miniMenu" id="close" checked="checked">
<label class="labelOpen" for="open"></label>
<label class="labelClose" for="close"></label>
<div class="miniIcon"><b></b><b></b></div>
<ul>
<li><a href="">View Full Site</a></li>
<li><a href="">Home</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Buyers Guide</a></li>
<li><a href="">Leather Care</a></li>
<li><a href="">Privacy &amp; Cookies</a></li>   
</ul>
</div>
</nav>

body {
margin:0;
padding:0;
}

#navbar {
height:49px; 
background:rgba(0,0,0,.3); 
}

.miniIconPanel {
width:30px; 
height:23px; 
position:absolute; 
top:7px; 
left:10px;
padding:6px; 
border-radius:6px; 
background:#000; 
}

nav input {
display:none;
}

nav label {
width:400px; 
height:37px; 
position:absolute;
top:-1px;   
left:-1px; 
z-index:10;
margin:0;
}

nav div.miniIcon {
width:30px; 
height:13px; 
position:absolute; 
top:6px;  
left:6px; 
border:solid #d3d3d3; 
border-width:5px 0; 
-webkit-transition:0.5s;
transition:0.5s;
}

nav div.miniIcon b {
width:30px; 
height:5px; 
position:absolute;
top:4px; 
left:0; 
-webkit-transition:0.5s;
transition:0.5s;
background:#d3d3d3;
}

nav ul {
top:50px; 
left:0; 
list-style:none;
visibility:hidden;
position:absolute;
padding:0; 
margin:0; 
background:#f5f5f3;
}

nav li {
margin-bottom:10px;
}

nav li a {
width:100%;
display:block;  
color:#111; 
text-align:center; 
text-decoration:none; 
padding:8px;
border:1px solid #808080;
border-radius:6px;
background:#fafafa;
}

nav #close:checked ~ .labelClose {
z-index:5;
}

nav #open:checked ~ div b:first-child {
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

nav #open:checked ~ div.miniIcon {
border-color:transparent;
}

nav #open:checked ~ div b:last-child {
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}

nav #open:checked ~ ul {
visibility:visible;
}

Answer 1

nav li a {
  width:282px; /*<- change this to 100%*/
  display:block;  
  color:#111; 
  text-align:center; 
  text-decoration:none; 
  padding:8px;
  border:1px solid #808080;
  border-radius:6px;
  background:#fafafa;
}

如果你把它改成100％就可以了。

编辑：好吧它没有做到这一点。。遗憾

Answer 2

HTML元素的排列与CSS不一致。

将HTML更改为：

<div id="navbar">
    <nav>

        <input type="radio" name="miniMenu" id="open">
        <input type="radio" name="miniMenu" id="close" checked="checked">

        <div class="miniIconPanel">
            <label class="labelOpen" for="open"></label>
            <label class="labelClose" for="close"></label>
            <div class="miniIcon"><b></b><b></b></div>
        </div>

        <ul>
            <li><a href="">View Full Site</a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Contact Us</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Buyers Guide</a></li>
            <li><a href="">Leather Care</a></li>
            <li><a href="">Privacy &amp; Cookies</a></li>   
        </ul>
    </nav>
</div>

<强>修正：

<div id="navbar">错过了结束</div>代码

<ul>移出<div class="miniIconPanel">

<input id="open" />移出<div class="miniIconPanel">以控制其下一个CSS兄弟<ul>

然后将其添加到现有CSS的最底部以覆盖当前的CSS。虽然，你应该＆＃39;使用这些定义手动更新当前的CSS。

/*  =====
    FIXES
    =====   */
nav #open:checked ~ div.miniIconPanel > div.miniIcon {
    border-color:transparent;
}
nav #close:checked ~ div.miniIconPanel > .labelClose {
    z-index:5;
}
nav ul{
    left:10px;
    right:10px;
    width:auto;
}
nav ul li a{
    margin:auto;
    width:auto;
}

Answer 3

在{strong> div 中position: absolute使用position: absolute并不是一个好主意。我对你的CSS进行了一些更改，它正在运行。但是你需要设置一下miniIconPanel的样式。

.miniIconPanel {
width: 100%;
height:23px; 
position:relative; 
}

nav div.miniIcon {
width:30px; 
height:13px; 
position:absolute; 
top:6px;  
left:6px; 
border:solid #d3d3d3; 
background:#000;
border-width:5px 0; 
-webkit-transition:0.5s;
transition:0.5s;
padding:6px;
border-radius:6px; 
}

nav ul {
top:50px; 
left:0; 
list-style:none;
visibility:hidden;
position:absolute;
padding:0; 
margin:0; 
background:url(http://leathersolutions.co.uk/mobile/images/background.jpg) repeat #f5f5f3;
width: 100%;
}

nav li a {
display:block;  
color:#111; 
text-align:center; 
text-decoration:none; 
padding:8px;
border:1px solid #808080;
border-radius:6px;
background:#fafafa;
}

您可以查看工作示例here。

如何在菜单上实现100％的宽度

3 个答案: