我正在尝试从嵌套列表标记创建水平列表,例如,我拥有当前标记:
<ul>
<li class="alone">List Item 1</li>
<li class="alone">List Item 2</li>
<li class="alone">List Item 3</li>
<li class="group">List Item 4
<ul>
<li class="not_alone">List Item 4a</li>
<li class="not_alone">List Item 4b</li>
<li class="not_alone">List Item 4c</li>
<li class="not_alone">List Item 4d</li>
</ul>
</li>
<li class="alone">List Item 5</li>
</ul>
我想要实现类似于以下内容:
<style>
div { display: inline-block; }
.alone { background: #E5ECF9; border: 1px solid #336699; color: #336699; }
.group { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.group .not_alone { background: #FBE3E4; border: 1px solid #CC0000; color: #CC0000; }
.item { padding: 2px; margin: 0 2px; }
</style>
<div class="wrapper">
<div class="alone item">List Item 1</div>
<div class="alone item">List Item 2</div>
<div class="alone item">List Item 3</div>
<div class="group item">
List Item 4
<div class="group item">List Item 4a</div>
<div class="group item">List Item 4b</div>
<div class="group item">List Item 4c</div>
<div class="group item">List Item 4d</div>
</div>
</div>
<div class="alone item">List Item 5</div>
</div>
您可以在这里http://jsbin.com/exivi5观看演示.
是否可以使用现有的嵌套列表标记?另外,我还可以将ul父级列表的宽度保持为100%,以使其适合整个视口吗?
这需要与FF,Webkit和IE7兼容,但将获得IE8支持.
提前致谢!
最佳答案
尝试添加以下CSS规则:
ul {list-style: none; margin: 0; padding: 0; float:left; display: inline;}
ul li {float:left; display: inline; margin: 0 5px; padding: 3px 2px;}
ul li ul {float:right;}
h2 {clear: left;}
有点摆弄&填充物应该看起来和你的一样
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。