Question

我想要一条直线灰色线条填满整个屏幕中间。我有点像<hr>，但我不想使用<hr>。但是，当我尝试使用它时，我的div的右侧总会有一些空白空间，我无法摆脱它。

这是我的HTML代码：

<div id = "rule">

</div>

这是我的CSS：

@charset "utf-8";
/* CSS Document */
*{
    padding-left:0;
    padding-right:0;
    margin-left:0;
    mergin-right:0;
}

#rule{
    background-color:#fff;

    margin-left:auto;
    margin-right:auto;

    height:40px;
    width:100%; 
    webkit-box-shadow: inset 2px 3px 10px 3px rgba(0, 0, 0, 0.5);

    box-shadow: inset 2px 3px 10px 3px rgba(0, 0, 0, 0.5);
}

Answer 1

我认为这是因为您的代码中存在拼写错误。在*选择器中，mergin-right:0应为margin-right:0。

* {
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
}

See this JS Fiddle example

Answer 2

我在所有CSS文件开头通常做的就是通过将所有内容设置为0来摆脱所有默认边距和填充和边框。

然后你可以准确地知道你的位置，并且可以在你认为合适的时候添加填充，边距和边框。

将所有内容设置为零：

*{margin: 0;padding: 0px;border:0;}

Div留下很小的空白而不是填充宽度100％

2 个答案: