如何在div中移动UL标记以形成菜单
如何在div中移动UL标记以形成菜单
提问于 2014-06-09 21:58:36
我正试图在我的html代码中实现一个购物菜单，下面是我目前正在使用的html的简单部分
<html>
<head>
<style>
.category-list
{
width: 300px;
background-color: #CCC;
}
body {background-image: url("images/background.gif");}
</style>
</head>
<body>
<div class="category-list">
<ul>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
<li>Item 2-5</li>
</ul>
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
<ul>
<li>Item 4-1</li>
<li>Item 4-2</li>
<li>Item 4-3</li>
</ul>
</div>
</body>
</html>如果你看看下面的图片，
左边的图像是现在显示的图像，中间的图像是我想要我的菜单看起来的样子，右边的图像只是一个模板，向你展示我的意思。
因此，基本上第一个UL将显示，第二个UL将显示，在一行中，然后第三个UL将被绘制在第一个UL下面，然后第四个UL将绘制在第二个UL下面。
回答 3
Stack Overflow用户
发布于 2014-06-09 22:08:29
您可以尝试向左浮动和向右浮动，所以
<ul class="columnLeft"> 1. ....</ul>
<ul class="columnRight"> 2. ....</ul>
<ul class="columnLeft"> 3. ....</ul>
<ul class="columnRight"> 4. ....</ul>用样式表
columnLeft { float: left;}
columnRight { float: right;}在你的图片中，第一个UL和第二个UL有不同的高度，前面的ULs直接粘贴到上面的UL底部。这就是为什么您可以通过对左/右进行分类来创建“列”。
Stack Overflow用户
发布于 2014-06-09 22:20:13
或者使用这个示例
<style>
.category-list{
width: 300px;
background-color: #CCC;
}
body {
background-image: url("images/background.gif");
}
.red{
border: solid 1px red;
}
.green{
border: solid 1px green;
}
.blue{
border: solid 1px blue;
}
.yellow{
border: solid 1px yellow;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
<div class="category-list">
<div class="left">
<ul class="red">
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul class="green">
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
<li>Item 2-5</li>
</ul>
</div>
<div class="right">
<ul class="blue">
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
<ul class="yellow">
<li>Item 4-1</li>
<li>Item 4-2</li>
<li>Item 4-3</li>
</ul>
</div>
Stack Overflow用户
发布于 2014-06-09 22:31:13
首先，浮动您的<ul>，给它们一个宽度，例如，两列的width: 50%;，3列的width: 33%，最后是外部div category-list，这样就可以维护布局，而不影响页面的其余部分。
以下是它的全部内容：
.category-list:after{
clear: both;
display:block;
content: '';
}
.category-list ul{
float:left;
width: 50%
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24129755
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号