我正在制作一个应用程序，其中有滑入/滑出菜单。当显示此菜单时，我希望它以两行显示图像。由于有很多图像，我想要一个水平滚动条以及箭头来导航它们。
我的问题是我无法将这些图像水平排列成两行。它们一直以垂直方式出现。
目前，当我添加更多图像时，右侧的箭头会消失，而当我滚动到末尾时，它会再次显示。我不知道为什么我无法在不移动其他元素的情况下获得确定的滚动区域。
var step = {};
var stepsOpen = false;
function onHandleClick() {
if (stepsOpen) {
document.getElementsByClassName("StepMenu")[0].setAttribute("style", "top: -77px;");
document.getElementsByClassName("Handle")[0].setAttribute("style", "top: 102px;");
} else {
document.getElementsByClassName("StepMenu")[0].setAttribute("style", "top: 102px;");
document.getElementsByClassName("Handle")[0].setAttribute("style", "top: 281px;");
}
stepsOpen = !stepsOpen;
}body{
margin:0;
height:100%;
background: #000000;
}
html {
font-family: 'SST Japanese Pro';
font-size: 62.5%;
height: 100%;
width:100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
user-select: none;
}
.Title{
background: linear-gradient(#000000, #2a2a2a);
font-size: 28px;
color: #b9b9b9;
top:0;
left: 0;
position:fixed;
margin: 0;
width: 100%;
height: 102px;
line-height: 102px;
z-index:2;
display: flex;
flex-direction: column;
align-items: center;
}
.StepMenu{
background: #2a2a2a;
margin: 0;
padding: 0;
position:relative;
display:flex;
height: 179px;
width:100%;
top:-77px;
transition: 0.5s;
}
.stepContainer{
float:left;
top:0;
width:100%;
height: 100%;
display:flex;
flex-direction: row;
align-items:baseline;
}
.Stitle {
font-size: 17px;
color: #a7a7a7;
width: 200px;
left: 0;
height: 50%;
margin: 0;
align-items: center;
display: flex;
padding-left:20px;
}
.Steps {
width:90%;
height: 179px;
overflow: auto;
}
.lines {
height: 89.5px;
width: 100%;
display: table;
table-layout: fixed;
}
img {
width: 97px;
height:55px;
background-image: url('../res/image/tuna.jpg');
margin-left: 12.5px;
margin-right: 12.5px;
margin-bottom: 31px;
display: table-cell;
}
::-webkit-scrollbar {
width: 0px;
}
.arrow {
border: solid white;
position: relative;
padding: 10px;
margin: auto;
}
.right {
padding: 0;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
border-left: 20px solid #959595;
border-right: 0px;
}
.left {
padding: 0;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
border-right: 20px solid #959595;
border-left: 0px;
}
.Handle {
width: 87px;
top: 102px;
margin: auto;
margin-top: 0px;
background-color: #2a2a2a;
position: absolute;
left: 0;
right: 0;
height: 13px;
padding: 4px;
transition: 0.5s;
display:flex;
}
.Htext {
font-size: 11px;
color: #959595;
width: 80%;
margin-left: 10px;
}
.Harrow {
position: relative;
width: 0;
height: 0;
margin-right:10px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #959595;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Step</title>
<link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<div class="Title">Recipe Title</div>
<div class="StepMenu">
<div>
<div class="Stitle">Part1</div>
<div class="Stitle">Part2</div>
</div>
<div class="stepContainer">
<div class="arrow left"></div>
<div class="Steps">
<div class="lines">
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
</div>
<div class="lines">
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
</div>
</div>
<div class="arrow right"></div>
</div>
</div>
<div class="Handle" onclick="onHandleClick()">
<div class="Htext">STEPS</div>
<div class="Harrow"></div>
</div>
<script src="./js/app.js"></script>
</body>
</html>最佳答案
我刚刚在 CSS 中为图像添加了 float:left 。这可能对你有帮助。 这是我的 fiddle 链接..
https://jsfiddle.net/b6jpkdhk/
img {
width: 97px;
height:55px;
background-image: url('../res/image/tuna.jpg');
margin-left: 12.5px;
margin-right: 12.5px;
margin-bottom: 31px;
display: table-cell;
float:left;
}
关于javascript - 水平对齐表格形式的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44130986/