Question

我有一个页面，当我将浏览器窗口水平缩小时，内容也变得越来越窄，我该如何解决这个问题？我只希望内容保持100％的宽度，如果浏览器窗口很小，则显示水平滚动条。

您可以看到它HERE，尝试缩小浏览器窗口。

我也尝试过将内容宽度设置为1000px，但它无法按预期工作。

这是CSS代码：

body {
    background: url(http://i.imgur.com/UAq9egG.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Arial;
}

.content {
    padding: 10px 10px;
    background: rgba(255,255,255,0.3);
    margin: 30px;
}

p {
    color: white;
}

此处还有 jsfiddle demo

Answer 1

将内容宽度设置为1000像素，对我来说很好。

如果您打开开发人员工具并分配内容类1000px，则会显示水平滚动条而不是拉伸内容。

Answer 2

对我来说，只需在.content类中添加1000px即可正常工作：

.content {
  padding: 10px 10px;
  background: rgba(255,255,255,0.3);
  margin: 30px;
  width: 1000px;
}

如果您希望针对不同的浏览器大小使用不同的行为。你可以看看CSS @media查询

http://www.w3schools.com/Css/css_mediatypes.asp

Answer 3

尝试申请

white-space:nowrap; 
flot: left;

根据你的内容。示例：http://jsfiddle.net/c9pcrqv9/1/

Answer 4

我建议更好的答案。运用 overflow-x:scroll 您可以轻松地使内容水平滚动。

所以最好为.content创建一个容器，为它指定属性.content已经得到了，然后在内部div中放入固定的1000px和overflow-x：scroll

的实际内容

如何禁用内容变小？

4 个答案: