CSS 位置：用水平滚动条修复溢出的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23276433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS position: fixed with horizontal scroll bar for overflowing content
提问by user3194721
I'm using CSS position: fixedfor a divtag. My browser horizontal scroll bar is moving but I'm not seeing text. This is what I tried so far:
我正在使用 CSSposition: fixed作为div标签。我的浏览器水平滚动条正在移动，但我没有看到文本。这是我到目前为止尝试过的：
<html>
<head>
<style type="text/css">
.test {
position: fixed;
left: 0;
right: 0;
top: 0;
background: rgba(0, 0, 0, .2);
overflow-x: auto;
white-space: nowrap;
width:2500px;
}
body {
}
</style>
</head>
<body>
<div class="test">
test data test data test datatest data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test data
</div>
</body>
</html>
I need to display the text in a single line with a browser horizontal scroll bar(not div scroll bar)
我需要用浏览器水平滚动条（不是 div 滚动条）在一行中显示文本
回答by kelunik
You probably want overflowing text to create a scroll bar. You have to let the browser know, it shouldn't break lines.
您可能想要溢出文本来创建滚动条。你必须让浏览器知道，它不应该断行。
.test {
position: fixed;
left: 0;
right: 0;
top: 0;
background: rgba(0, 0, 0, .2);
overflow-x: auto;
padding: 10px;
white-space: nowrap;
}
see my jsFiddle. I just added a background and padding so it's better visible.
看我的 jsFiddle。我刚刚添加了一个背景和填充，以便更好地可见。
回答by Ishan Jain
First of all, if you want to give vertical scroll with your div you need to specify height.
首先，如果你想给你的 div 垂直滚动，你需要指定height.
.test {
position: fixed;
width: 2500px;
height: 100%;
overflow: scroll;
}
回答by Amir Fo
In my experience, sometimes you make position: fixed;for some divthat have child div inside and this child div contains the content that will be scrolled. you should add display: flex;to the child div.
根据我的经验，有时您会创建position: fixed;一些div内部有子 div 的子 div，而这个子 div 包含将要滚动的内容。你应该添加display: flex;到子div。
Without adding this style to this situation, it won't work well.
如果不将这种样式添加到这种情况下，它将无法正常工作。
回答by Kamran Siddique
You could try the follwing:
您可以尝试以下方法：
<html>
<head>
<style type="text/css">
.test {
position: absolute;
left: 0;
right: 0;
top: 0;
background: rgba(0, 0, 0, .2);
white-space: nowrap;
width:2500px;
}
body {
}
</style>
</head>
<body>
<div class="test">
<p>test data test data test datatest data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test data</p>
</div>
</body>
</html>
回答by blurfus
Since you set your width to be 2500px, it is not showing in your browser view. So, I added a specified height and reduced the width to make it obvious that they are shown. Also set both (x and y) to scroll - you can fiddle with it as you see fit according to your needs.
由于您将宽度设置为 2500 像素，因此它不会显示在您的浏览器视图中。所以，我添加了一个指定的高度并减少了宽度，以使其明显显示出来。还将 (x 和 y) 设置为滚动 - 您可以根据需要随意调整它。
.test {
position: fixed;
width: 250px;
height: 150px;
overflow: scroll;
}
回答by blurfus
.test {
position: fixed;
width: 2500px;
height:100%;
}
