Question

我想要完成的是在移动设备上我希望我的标题左边有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>

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

提前致谢！

Answer 1

尝试在媒体查询中将width: 100%;更改为width: auto; {/ 1}}。

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

Answer 2

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

box-sizing属性用于告诉浏览器调整属性（宽度和高度）应包含的内容。

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

左右百分比保证金不正常

2 个答案: