html - どうすればそのhtmlリストを作成できますか?

Question

この写真のような要素の html リストを作成する必要があります。

liまたはオプション要素を包括する外部divだと思います。それが可能だ？フォームのため、その値を郵送する必要があります。

ありがとう。

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

ここで見たものからそれを行うには多くの方法があり、divがstyle="width:100%;float:left;"あり、それだけです

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>

また、CSS は次のようにする必要があります。

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