2017-10-14 44 views
0

我有一个导航栏,我想伸展到浏览器的全部宽度。是否有可能只伸展顶部,右边&这个div的左侧,以便他们触摸浏览器的两侧? 这里是我的代码现在: HTML:是否可以在CSS中展开div的各个面?

<div class="navigation"> 
<ul> 
    <a href="index.html"><li>Home</a></li> 
    <a href="about.html"><li>About</a></li> 
    <a href="contact.html"><li>Contact</a></li> 
</ul> 

CSS:

.navigation ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #B4ABAB; 
    width: 100%; 
    box-shadow: 3px 3px 2.5px grey; 
} 
.navigation li { 
    float: left; 
} 
.navigation li a { 
    display: block; 
    color: #000; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-size: 25px; 
} 

我已经试过背景大小的属性,并将其设置为100%,但它没有任何效果再加上我可以”用这个编辑单个的边。我也尝试了verticle-align:middle;但是,它也不起作用。有什么建议?谢谢!

+0

请问您可以包括一张图片或您正在寻找什么的一些视觉例子? – mrtig

回答

1

您需要设置html和body标签,以反映您要的0

body, 
html { 
    margin: 0; 
} 

保证金默认情况下,您的浏览器已经可以(也应该)被中和内部的风格化。

https://jsfiddle.net/Lphggzf6/

+0

非常感谢!我很惊讶,我甚至没有想到那个笑 – Zach

0
.navigator { 
    position : fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

可能你应该保持你的导航器固定和可滚动的内容。