<ul> 中的响应式画布？答案

【问题标题】：Responsive canvas in <ul>?<ul> 中的响应式画布？
【发布时间】：2016-08-07 16:58:01
【问题描述】：

我正在尝试在每个列表项中创建一个带有画布元素的可拖动列表（水平）。我在这里有一个工作概念：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 可能没有遵循正确的编码标准；请记住，这是一个概念证明，而不是最终代码！

【问题讨论】：

标签： javascript jquery css twitter-bootstrap-3 responsive-design

【解决方案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>

【讨论】：