我怎么能做那个HTML列表？

Question

我需要做一个像这张照片的HTML元素列表：

我认为它是一个外部div，可以使用li或者选项元素。这是可能的？ 因此，我需要通过邮寄方式提交其价值。

感谢。

Answer 1

从我的评论中继续......

<form>
  <select multiple>
    <option value="Element 1">Element 1</option>
    <option value="Element 2">Element 2</option>
    <option value="Element 3">Element 3</option>
  </select>
  <input type="submit" value="Submit">
</form>

Answer 2

我希望jsfiddle帮助你。

    <div class='wrapper'>
      <ul>
          <li>element 1</li> 
          <li>element 2</li>
          <li>element 3</li>
          <li>element 4</li>
          <li>element 5</li>
          <li>element 6</li>
    </ul>
</div>

和Css

.wrapper{
    height : 100px;
    overflow : auto;
    width : 250px;
}
li{
    border : 1px black solid;
}

Answer 3

有很多方法可以实现，我在这里看到有style="width:100%;float:left;"的div，就是这样

Answer 4

可能有太多不同的方法（div，li，div内的table，li。我的建议是，将div元素用于div。我更喜欢这样，因为您可以更改<div id="list-content"> <ul> <li><span>Element 1</span></li> <li><span>Element 2</span></li> <li><span>Element 3</span></li> <li><span>Element 4</span></li> <li></li> <li></li> <li></li> </ul> </div> 宽度和高度，使用溢出等，您的列表将更加个性化。

示例：

div#list-content {
    width: 200px;
    height: 500px;
    overflow-y: scroll;
}

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

li {
    border: 1px solid black;
    margin: 2px 0;
}

你的CSS必须是这样的：

{{1}}