左右百分比边距无法正常工作答案

【问题标题】：percentage margin left and right not working properly左右百分比边距无法正常工作
【发布时间】：2016-10-19 13:05:50
【问题描述】：

我想要完成的是在移动设备上我希望我的标题在左侧有 3% 的边距，在右侧有 3% 的边距。我想你可以说我所做的工作有效，但它创建了一个侧滚动条。

这是我的代码。 \

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic);

* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

header {
    width: 100%;
    height: 64px;
    background-color: #ECEFF1;
}

.content {
    height: auto;
    margin: auto;
    width: 1100px;
    overflow: hidden;
}

.logo {
    float: left;
    width: 150px;
    height: 40px;
    margin-top: 12px;
    border-radius: 4px;
    background-color: white;
}

.btn {
    float: right;
    width: 160px;
    height: 40px;
    margin-top: 12px;
    border-radius: 4px;
    background-color: #4285f4;
}

@media only screen and (max-width:1110px) {
    .header {
        width: 100%;
    }
    
    .content {
        width: 100%;
        margin-left: 3%;
        margin-right: 3%;
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
        <div class="content">
            <div class="logo"></div>
            <div class="btn"></div>
        </div>
    </header>
</body>
</html>

我已经处理这个问题很长一段时间了，但似乎无法弄清楚为什么滚动条在那里。我确定它很小，我只是俯瞰它。

提前致谢！

【问题讨论】：

标签： html css margin percentage

【解决方案1】：

尝试将媒体查询中的.content 的width: 100%; 更改为width: auto;。

原因是100% + 3% + 3% > 100% 总宽度，而auto 会自动计算可用空间。

【讨论】：

【解决方案2】：

将属性box-sizing:border-box; 添加到您的内容 div 中，它将解决问题。

box-sizing 属性用来告诉浏览器尺寸属性（宽度和高度）应该包括什么。

w3盒子尺寸说明链接：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

【讨论】：