Question

我正在尝试在我的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>

如果你看一下下图，

enter image description here

左边的图像是当前显示的图像，中间的图像是我希望我的菜单看起来像，右边的图片只是一个模板，向您展示我的意思。

因此，基本上第一个UL将显示，第二个UL将在一行中显示，然后第三个UL将在第一个UL之下绘制，然后第四个UL将在第二个UL之下绘制。

Answer 1

将此添加到您的CSS：

ul:nth-child(2n-1) {
    float:left;
    margin: 0;
}

ul:nth-child(2n) {
    margin-left: 150px; /* Or how many px you want */
}

JSFiddle

Answer 2

你可以尝试向左浮动并向右浮动，所以

<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具有不同的高度，并且前面的UL直接粘贴在上部UL的底部。这就是为什么你可以创建＆＃34;列＆＃34;通过分类 - 左/右。

Answer 3

或使用此sample

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

Answer 4

首先浮动你的<ul> 给他们一个宽度，例如width: 50%;代表两列，width: 33%代表3列最后clear外部div category-list，以便维护您的布局，并且不会弄乱页面的其余部分。

这里是完整的：

.category-list:after{
    clear: both;
    display:block;
    content: '';
}

.category-list ul{
    float:left;
    width: 50%
}

如何在div中移动UL标签以形成菜单

4 个答案: