我需要做一个像这张图片这样的元素的html列表:
我认为它是一个包含 li 或选项元素的外部 div。这是可能的?它是一种形式,因此我需要通过邮寄方式提交其价值。
谢谢。
从我的评论继续...
<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>
我希望这个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;
}
可以有太多不同的方法来做到这一点(div
, li
inside a 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;
}
从我在这里看到的有很多方法可以做到这一点,有 divstyle="width:100%;float:left;"
就是这样