水平对齐表格形式的元素

Question

我正在制作一个应用程序，其中我有一个幻灯片进/出菜单。 显示此菜单时，我希望它以两行显示图像。 由于有很多图像，我想要一个水平滚动来浏览它们以及箭头。

我的问题是我无法以水平方式将这些图像排成两行。 它们一直以垂直方式出现。

目前，当我添加更多图像时，右侧的箭头消失了，当我滚动到最后它再次显示时。 我不知道为什么我不能设法确定滚动区域而不移动其他元素。

 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>

Answer 1

我刚刚为CSS中的图像添加了float：left。 这对你有帮助。 这是我的小提琴链接..

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;
}

水平对齐表格形式的元素

问题描述

1 个解决方案

解决方案1
0 2017-05-23 10:11:26

水平对齐表格形式的元素

问题描述

1 个解决方案

解决方案1 0 2017-05-23 10:11:26

解决方案1
0 2017-05-23 10:11:26