Question

我有一个导航栏，我想延伸到浏览器的整个宽度。是否可以只拉伸顶部，右侧和右侧。这个div的左侧是否触及浏览器的两侧？这是我现在的代码： HTML：

<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;
}

我已经尝试了background-size属性并将其设置为100％但它没有效果，而且我无法用它编辑单个方面。我也试过了verticle-align：middle;但是，它也没有用。有什么建议？谢谢！

Answer 1

您需要设置html和body标签以反映您希望保证金为0。

body,
html {
  margin: 0;
}

默认情况下，您的浏览器具有可以（并且应该）被中和的内部样式化。

https://jsfiddle.net/Lphggzf6/

Answer 2

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

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

是否可以在CSS中拉伸div的各个边？

2 个答案: