想並排放置文本側的DIV中

enter image description here 想並排放置文本側的DIV中

我期待實現上述一個DIV裏面的東西類似編碼：

<div id="container3" style="position: relative;"> 
    <div id="left" style="position: absolute; padding-left: 10px;"> 
     About Company<br>Our Team<br>Careers 
    </div> 
</div>

父DIV的CSS將舉行所有裏面的文字：

#container3 { 
    vertical align: top; 
    width: 80%; 
    height: 150px; 
    background-color: #ffffff; 
}

來源

2013-08-16 Zahid H

你剛許多回答的問題。你的計劃是什麼？到目前爲止，你有沒有嘗試過這方面的東西？ – AdityaSaxena

我其實正在趕時間。我正在嘗試一些代碼，以及...我很抱歉無法發佈它。 –

也許一些與此類似：

enter image description here

HTML：

<ul class="footer"> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
    <li class="link"> 
     Link 
    </li> 
</ul>

CSS：

.footer{ 
    background-color:#000000; 
    padding-left:5px; 
} 

.link{ 
    color:#ffffff; 
    list-style:none; 
    display:inline-block; 
    width:200px; 
    text-align:left; 
}

DEMO

Alternate Solution：http://jsfiddle.net/xU76e/1/

HTML：

<div class="footer"> 
    <ul class="footer-links"> 
     <li class="link"> 
      Link 
     </li> 
     <li class="link"> 
      Link 
     </li> 
     <li class="link"> 
      Link 
     </li> 
     <li class="link"> 
      Link 
     </li> 
    </ul> 
    <ul class="footer-links"> 
     <li class="link"> 
      Link 
     </li> 
     <li class="link"> 
      Link 
     </li> 
     <li class="link"> 
      Link 
     </li> 
     <li class="link"> 
      Link 
     </li> 
    </ul> 
    <ul class="footer-links"> 
     <li class="link"> 
      Link 
     </li> 
     <li class="link"> 
      Link 
     </li> 
    </ul> 
</div>

CSS：

.footer{ 
    background-color:#000000; 
    overflow:auto; 
} 

.footer-links{ 
    padding-left:5px; 
    float:left; 
    padding:0px 20px; 
    list-style:none; 
} 

.link{ 
    color:#ffffff; 
}

來源

2013-08-16 02:47:14 AdityaSaxena

謝謝...我正在完成我的，它是almsot完成！但我很感謝你的幫助...非常非常 –

在這個答案中增加了兩個解決方案。希望他們中的一個能幫助你。 – AdityaSaxena

你可以嘗試：

#container3 > div { 
float: left; 
padding-left: 10px; 
/* any additional styling */ 
}

來源

2013-08-16 02:39:55 jeff

如果我想在我的問題中創建像圖片一樣的網格，並顯示鏈接的對齊方式，該怎麼辦？對不起，我正在嘗試一些我的結局以及... –

你的意思是：http://jsfiddle.net/BhuGw/ – jeff

非常感謝你的幫助:) –

想並排放置文本側的DIV中

回答

相關問題