当位置为fixed时，我似乎无法找到一种显示内联元素的方法。除固定定位外，其他所有位置均有效。有什么建议吗？
我目前有五个相等的矩形，它们应该在每个矩形旁边排列并填充整个视口。但是，当我使用固定定位时，它们都汇聚成一个单独的位置。
我的代码如下：
<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>
.reveal {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
}
.reveal1 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
}
.reveal2 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
}
.reveal3 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
}
.reveal4 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
}<html>
<header></header>
<body>
<span class ="reveal" > a</span >
<span class ="reveal1" > b</span >
<span class ="reveal2" > c</span >
<span class ="reveal3" > d</span >
<span class ="reveal4" > e</span >
</body>
</html>
答案 0 :(得分：1)
由于您使用固定位置，因此您必须为每个块提供左侧位置。请在下面找到更新的代码，我添加了一些背景颜色以帮助区分。下面的CSS：
.reveal {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background: red;
left: 0;
}
.reveal1 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background: blue;
left: 20%;
}
.reveal2 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background: green;
left: 40%;
}
.reveal3 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background: orange;
left: 60%;
}
.reveal4 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background: yellow;
left: 80%;
}
如果有效，请告诉我。另一方面，为什么你首先要确定定位？
希望这有帮助。
答案 1 :(得分：1)
只需将所有内容包装在一个新的div中，然后修复该位置。
.fixed {
position: fixed;
width: 100%;
}
span {
background: red;
}
.reveal {
width: 20%;
height: 100vh;
display: inline-block;
}
.reveal1 {
width: 20%;
height: 100vh;
display: inline-block;
}
.reveal2 {
width: 20%;
height: 100vh;
display: inline-block;
}
.reveal3 {
width: 20%;
height: 100vh;
display: inline-block;
}
.reveal4 {
width: 20%;
height: 100vh;
display: inline-block;
}<div class="fixed">
<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>
</div>
答案 2 :(得分：1)
这是因为您已将position:fixed添加到所有元素，并且当元素具有position of fixed时，默认情况下需要left and top as 0即aligning元素，因此您可以尝试使用以下内容或wrap parent div代码position并将其fixed设置为.reveal {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background:#33f;
}
.reveal1 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background:#f2f;
left:20%;
}
.reveal2 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background:#22f;
left:40%;
}
.reveal3 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background:#f22;
left:60%;
}
.reveal4 {
width: 20%;
height: 100vh;
position: fixed;
display: inline-block;
background:#f2f;
left:80%;
}而不是所有元素。
position：fixed - 不要为元素留空间。相反，位置 它位于相对于屏幕视口的指定位置，并且没有 滚动时移动它。
<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>#box{
width:100vw;
height:100vh;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
.reveal {
width: 20%;
height: 100vh;
display: inline-block;
background:#33f;
}
.reveal1 {
width: 20%;
height: 100vh;
display: inline-block;
background:#f2f;
}
.reveal2 {
width: 20%;
height: 100vh;
display: inline-block;
background:#22f;
}
.reveal3 {
width: 20%;
height: 100vh;
display: inline-block;
background:#f22;
}
.reveal4 {
width: 20%;
height: 100vh;
display: inline-block;
background:#f2f;
}
或者将它包装到父div中，如下所示，
<div id="box">
<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>
</div>[input_start..input_end]
答案 3 :(得分：0)
它不显示：阻止，它的位置：固定使得div相对于浏览器窗口拉伸，
只需添加另一个类。并将CSS中的矛盾分开了
<div class="one"><span class="reveal"></span></div>
<style>
.reveal {
width: 20%;
height: 100vh;
display: inline-block;
}
.one
{
position: fixed;
}
</style>
试试上面的代码