Совместите 2 столбца текстовых ссылок - PullRequest
0 голосов
/ 23 апреля 2010

У меня есть этот код в моем блоке, и я хотел бы иметь два столбца слева и справа Теперь 2-й находится под первым столбцом.

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

Ответы [ 2 ]

1 голос
/ 23 апреля 2010

Используйте float:left для элементов, которые вы хотите разместить рядом.

0 голосов
/ 23 апреля 2010

Мне нравятся списки. Они также имеют смысловое значение.

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...