Question

我正在尝试在每个listitem中创建一个带有canvas元素的可拖动列表（水平）。我在这里有一个有效的概念：https://codepen.io/Todai/pen/zBmRVk

我需要帮助的是使其具有响应性。我已经尝试过这样操纵宽度和高度：

#slider {
  width: 100%;
  height: auto;
  overflow: hidden;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

canvas {
    width: 100%;
    height: auto;
}

但所有这一切都是使列表垂直并将第二个图表放在第一个图表的顶部。我想要的显然是将图表“放在右边”。

我还对于为什么第二张图表略高于第一张图表有点困惑;我似乎无法理解为什么它会在.js代码中更高。

任何线索？

编辑：

注意：我知道codepen可能没有遵循正确的编码标准;请记住，这是一个概念证明 - 而不是最终的代码！

Answer 1

我设法通过添加周围的部分和div来自行修复：

<强> CSS：

#slider { 
  width: 100%;
    overflow: hidden;
}

ul { 
  list-style: none;
  margin: 0;
  padding: 0;
}

.element {
  width: 100%;
  height: auto;
}
.list-element {
  width: 33.333%;
  float: left;
  font-weight: bold;
}

canvas {
  width: 100%;
  height: auto;
  float: left;
}

<强> HTML：

<section>
    <div class="container-fluid">
        <div class="row">
          <div class="col-md-8 col-md-offset-5">
              <div id="slider"> 
                <ul>
                        <div class="element">
                           <li><canvas id="programming"> </canvas>
                           </li>
                        </div>
                        <div class="element">
                           <li>
                           <canvas id="design"> </canvas>
                           </li> 
                        </div>
                        <div class="element">
                           <li> <canvas id="theory"> </canvas> </li>
                       </div>
                   </ul> 
               </div>
           </div>
       </div>
   </div> 
</section>

<ul>中的响应画布？

1 个答案: