调整大小导航菜单区域

-1

我想调整左侧导航菜单区域的大小以使其变薄。我使用这个代码示例为例：调整大小导航菜单区域

div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 

 
header, 
 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 160px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 170px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 

 
    <header> 
 
    <h1>City Gallery</h1> 
 
    </header> 
 

 
    <nav> 
 
    <ul> 
 
     <li><a href="#">London</a></li> 
 
     <li><a href="#">Paris</a></li> 
 
     <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <article> 
 
    <h1>London</h1> 
 
    <p>Lo.........m.</p> 
 
    </article> 
 

 
    <footer>Copyri....com</footer> 
 

 
</div>

编号：https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float

我怎样才能得到这种视觉效果：

来源

2017-06-28 Peter Penzov

设置一个'width'或'min-width'就可以了？ – domsson

我必须在哪里设置它？你能给出一个完整的答案吗？ –

你希望你的'nav'变小，所以我建议把它设置在你的'nav'上...试试吧。 – domsson

所有你必须做的是减少“文章”的余裕和“导航”

div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 

 
header, 
 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    //CHANGE THIS FROM max-width: 160px to the following 
 
    max-width: 60px; 
 
    margin: 0; 
 
    padding: 1em; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    //CHANGE THIS FROM margin-left: 170px to the following 
 
    margin-left: 100px; 
 
    
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 

 
    <header> 
 
    <h1>City Gallery</h1> 
 
    </header> 
 

 
    <nav> 
 
    <ul> 
 
     <li><a href="#">London</a></li> 
 
     <li><a href="#">Paris</a></li> 
 
     <li><a href="#">Tokyo</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <article> 
 
    <h1>London</h1> 
 
    <p>Lo.........m.</p> 
 
    </article> 
 

 
    <footer>Copyri....com</footer> 
 

 
</div>

来源

2017-06-28 09:56:33

'文章'甚至没有'宽度'设置。 – domsson

margin-left *不是宽度。我的错。 –

你能告诉我如何用原始代码做这件事吗？ –

设置的空白，留给你希望像下面的任何值：我改变170像素的17像素的EX。

article { 
 
    margin-left: 17px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
}

来源

2017-06-28 10:02:14

我没有得到期望的结果。你可以先从链接尝试进入编辑器吗？ –

我尝试过那里，然后我张贴在这里。请记住只更改我说的元素 –

你可以改变nav填充要像padding: 5px;小一点，并最终降低您的导航元素的font-size，这样你可以把它更薄

div.container { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
} 
 

 
header, footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    float: left; 
 
    max-width: 50px; 
 
    margin: 0; 
 
    padding: 5px; 
 
    font-size:10px; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
nav ul a { 
 
    text-decoration: none; 
 
} 
 

 
article { 
 
    margin-left: 50px; 
 
    border-left: 1px solid gray; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <header> 
 
     <h1>City Gallery</h1> 
 
     </header> 
 
     
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">London</a></li> 
 
      <li><a href="#">Paris</a></li> 
 
      <li><a href="#">Tokyo</a></li> 
 
     </ul> 
 
     </nav> 
 

 
     <article> 
 
     <h1>London</h1> 
 
     <p>Lo.........m.</p> 
 
     </article> 
 
     
 
     <footer>Copyri....com</footer> 
 
    </div> 
 
    </body> 
 
</html>

来源

2017-06-28 10:02:25 GreySharr

你能告诉我怎样才能将文章中的原始代码编辑到链接中吗？ –

@PeterPenzov你只需要复制我写的CSS，导航和文章标签，并替换你现有的CSS（你在原始文章中给出的）。 – GreySharr

调整大小导航菜单区域

回答

相关问题