Question

我的块中有这个代码，我希望左右两列。现在第二列是第一列。

<style type="text/css"> 
    a img{border:none;}
    #planninglaunchbox
    {
        background:#f3f8e7;
        color:#1f1f1f;
        font:normal 11px Arial,sans-serif;
        margin:0 10px 10px 0;
        overflow:hidden;
        width:235px;
    }
        #planninglaunchbox .inner
        {
            padding:10px 0 10px 10px;
        }
        #planninglaunchbox a{color:#1f1f1f;text-decoration:none;}
        #planninglaunchbox a:active,
        #planninglaunchbox a:hover{text-decoration:underline;color:#579BC3;}
        #planninglaunchbox h3
        {
            color:#1f1f1f;
            font:normal 12px Georgia,serif;
            margin:0 0 5px;
            text-transform:lowercase;
            width:215px;
        }
        #planninglaunchbox h4
        {
            font:bold 12px Arial,sans-serif;
            margin:0 0 10px;
        }
        #planninglaunchbox ul
        {
            list-style:none;
            margin:0 0 5px;
            padding:0;
        }
            #planninglaunchbox ul.first{margin-right:10px;}
            #planninglaunchbox ul.first,
            #planninglaunchbox ul.last

        {
                float:left;
            }

            #planninglaunchbox ul li
            {
                background:none;
                margin-bottom:5px;
                padding:0;
            }
                #planninglaunchbox ul li img
                {
                    margin-right:6px;
                    vertical-align:middle;
                }
        #planninglaunchbox .seeall
        {
            clear:both;
            margin:0;
            padding:0;
            width:auto;
        }
</style>
<div id="planninglaunchbox">
<div class="inner">
<h3> Theme</h3>
<ul class="first">

!--Some links--  

</ul>




<ul class="last">

!--Some links--  


</ul>

</div>
</div>

Answer 1

将float:left用于要并排放置的元素。

Answer 2

我喜欢名单。它们也有语义含义。

<style>
ul {
    width:200px;
}

ul li {
    width:100px;
    float:left;
}
</style>

<ul>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
    <li><a href="">Something</a></li>
</ul>

有一些间距：

<style>
    ul {
        width:220px;
    }

    ul li {
        width:100px;
        float:left;
        margin-left:10px
    }
    </style>

对齐2列文本链接

2 个答案: