2010-04-23 63 views
0

我在我的代碼塊中有這樣的代碼,我希望左右兩列。現在的第二個是在第一列。對齊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> 
+0

歡迎SO,安渡!這裏的帖子被允許包含一些HTML,並根據你的帖子對我的看法,我懷疑你的一些HTML標籤沒有按照你的意圖顯示。在發佈我們的格式規則摘要時,您可以點擊大橙色問號塊。你會重新格式化嗎?這會讓我們更容易理解您的問題併爲您提供幫助。 – Pops 2010-04-23 17:01:28

回答

1

float:left用於要並排放置的元素。

0

我喜歡名單。它們也具有語義意義。

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

:) 我工作正常後,我添加「寬度:100px;」 我可以增加兩列之間的距離嗎? 乾杯。 – andu 2010-04-23 18:33:11