2 열의 텍스트 링크 맞추기

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>