2017-06-28 468 views
-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

我怎樣才能得到這種視覺效果:

enter image description here

+0

設置一個'width'或'min-width'就可以了? – domsson

+0

我必須在哪裏設置它?你能給出一個完整的答案嗎? –

+0

你希望你的'nav'變小,所以我建議把它設置在你的'nav'上...試試吧。 – domsson

回答

0

所有你必須做的是減少「文章」的餘裕和「導航」

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>

+0

'文章'甚至沒有'寬度'設置。 – domsson

+0

margin-left *不是寬度。我的錯。 –

+0

你能告訴我如何用原始代碼做這件事嗎? –

0

設置的空白,留給你希望像下面的任何值: 我改變170像素的17像素的EX。

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

+0

我沒有得到期望的結果。你可以先從鏈接嘗試進入編輯器嗎? –

+0

我嘗試過那裏,然後我張貼在這裏。請記住只更改我說的元素 –

0

你可以改變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>

+0

你能告訴我怎樣才能將文章中的原始代碼編輯到鏈接中嗎? –

+0

@PeterPenzov你只需要複製我寫的CSS,導航和文章標籤,並替換你現有的CSS(你在原始文章中給出的)。 – GreySharr