Html 如何定位一个100%宽度的div，左、右间距相同？_Html_Css

Html 如何定位一个100%宽度的div，左、右间距相同？

html css

Html 如何定位一个100%宽度的div，左、右间距相同？,html,css,Html,Css,我有一个带位置：relative（这里不需要，我也可以将它设置为绝对值）我想将空间放置在左右两侧，大小为20px，但宽度：必须是100%。我给出了我的代码，你可以看到它现在看起来是怎样的margin:0 20px 0 20px （请不要删除该问题，我已经尝试过类似的问题对不起：/） ->>第二个问题，我是否应该制作一个容器，使其包含所有内容？还是克利弗让我这么做我的HTML代码 <body>

我有一个

带

位置：relative

（这里不需要，我也可以将它设置为绝对值）我想将

空间放置在左右两侧，大小为20px，但

宽度：

必须是

100%

。我给出了我的代码，你可以看到它现在看起来是怎样的

margin:0 20px 0 20px

（请不要删除该问题，我已经尝试过类似的问题对不起：/）

->>第二个问题，我是否应该制作一个

容器，使其包含所有内容？还是克利弗让我这么做

我的HTML代码

<body>
<!-- <div class="container"> -->
    <div class="navbar">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">INFO</a></li>
            <li><a href="">ME</a></li>
        </ul>   
    </div>
    <div class="daily">
    </div>
    <div class="aussen">
     ...

body {

    margin: 0px;
    padding: 0px;
    background: #EFEFFB;
    /*overflow-x: hidden;*/
}

.navbar {

    position: absolute;
    width: 100%;
    height: 50px;
    background: grey;
    overflow: hidden;

}

.navbar ul {

    list-style-type: none;
    padding: 0px;
    margin-top: 0px;
    line-height: 50px;
}

.navbar ul li {

    float: left;
    margin-left: 15%;
    padding-left: 1%;
    padding-right: 1%;
    margin-top: 0px;

}


.navbar ul li a {

    color: white;
    text-decoration: none;
}


.navbar ul li:hover {

    background: #585858;

}

.daily {

    position: relative;
    top: 70px;
    height: 110px;
    width: 100%;
    border: 1px solid black;
    margin: 0 20px 0 20px


}

如图所示：

左边的空间没问题，但我想右边也一样。我的代码有什么问题？

-同时接受改进建议：）

使用内部

div

和外部

div

上的

填充来实现您想要的：

。每日{
位置：相对位置；
顶部：70像素；
填充：0 20px；
}
.内部{
高度：110px；
宽度：100%；
边框：1px纯黑；
}
使用内部div
和外部div
上的填充来实现您想要的：

。每日{
位置：相对位置；
顶部：70像素；
填充：0 20px；
}
.内部{
高度：110px；
宽度：100%；
边框：1px纯黑；
}

就这么简单：在.css
文件中，只需从.daily
类中删除一项内容：
width:100%; // remove that and your margin will apply correctly left/right

所以你的日常课程应该是：
.daily {
position: relative;
top: 70px;
height: 110px;
border: 1px solid black;
margin: 0 20px 0 20px;
}

很简单：在.css
文件中，只需从.daily
类中删除一项内容：
width:100%; // remove that and your margin will apply correctly left/right

所以你的日常课程应该是：
.daily {
position: relative;
top: 70px;
height: 110px;
border: 1px solid black;
margin: 0 20px 0 20px;
}

试试这个：
<div className='daily-container'>
  <div className="daily">
  </div>
</div>

试试这个：
<div className='daily-container'>
  <div className="daily">
  </div>
</div>

它不起作用，所以我的新。日常课是这样的：。每日{位置：相对；顶部：70px；高度：110px；/*宽度：100%；*/边框：1px纯黑；}是的，它起作用了，我自己试过。查看我对每日
课程的完整代码的编辑：您在上面的评论中忘记了代码中的空白。没问题，很乐意帮助！别忘了把我的答案标为正确的一个，或者按照你们的意愿投上一票：）嘿@stacks你们知道吗，我怎样才能做到这个位置：绝对divs？我喜欢更多地使用绝对值，但我在atm工作的另一个部门遇到了与Relative的问题。我本来想帮你，但你已经得到了答案，所以我想这很好！：）它不起作用，所以我的新。日常课是这样的：。每日{位置：相对；顶部：70px；高度：110px；/*宽度：100%；*/边框：1px纯黑；}是的，它起作用了，我自己试过。查看我对每日
课程的完整代码的编辑：您在上面的评论中忘记了代码中的空白。没问题，很乐意帮助！别忘了把我的答案标为正确的一个，或者按照你们的意愿投上一票：）嘿@stacks你们知道吗，我怎样才能做到这个位置：绝对divs？我喜欢更多地使用绝对值，但我在atm工作的另一个部门遇到了与Relative的问题。我本来想帮你，但你已经得到了答案，所以我想这很好！：）@CihanDincel你应该通过投票选出对你有帮助的答案并接受最适合你的答案来表达你的感激之情：）@CihanDincel似乎你试图接受所有的答案……你只能接受一个：）是的，我知道：）我标记了对我来说最简单的一个。但是，因为这是有益的，所以每个人都投了赞成票。我希望一切顺利谢谢你的帮助：）。。你是什么意思？想想我的第二个问题。设置一个包含everythink的div是更好还是这样好？除非你想在整个页面上执行一个操作，没有必要这样做it@CihanDincel你应该通过投票选出对你有帮助的答案并接受最适合你情况的答案来表达你的感激之情：）@CihanDincel似乎你试图接受所有答案……你只能接受一个：）是的，我知道：）我标记了对我来说最简单的一个。但是，因为这是有益的，所以每个人都投了赞成票。我希望一切顺利谢谢你的帮助：）。。你是什么意思？想想我的第二个问题。设置一个包含everythink的div是更好还是这样好？除非你想在整个页面上执行一个操作，否则没有必要这样做