HTML的鏈接部分？

它看起來像一個在本頁面最底部：HTML的鏈接部分？

http://www.microsoft.com/en-us/default.aspx

有創造箱和邊把它們放在一起更簡單的方法？

礦看起來像一個樓梯由380px每個

開始向下，這裏是我的源代碼：

<!--External Links--> <div id="external_links"> 
    <div> 
     <ul style="height:380px; width:240px; max-width:240px;" id="Rowone"> 
     <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li> 
     </ul> 
     <ul style="height:380px; width:240px; max-width:240px;" id="Rowtwo"> 
     <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li> 
     </ul> 
     <ul style="height:380px; width:240px; max-width:240px;" id="Rowthree"> 
     <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li> 
     </ul> 
    </div>

來源

2013-06-22 Mohammad Al-Ahdal

爲什麼每一個環節包含在列表中而不是列表項中？將所有鏈接放在一個'ul'中並將它們中的每一個都包含在'li'中是否更有意義？（無需爲這些兩個div要麼） –

你想讓他們在互相一列？或並排？（你想在這裏複製你的示例鏈接？） – Sergio

這是你想要的效果嗎？ http://jsfiddle.net/LpMfZ/ – Sergio

讓重組和簡化您的代碼位。我刪除了額外的<ul>標籤 - 這些將防止鏈接顯示在另一個旁邊。

<!--External Links--> <div id="external_links"> 
<div> 
    <ul style="height:380px;" id="Rowone"> 
     <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li> 
     <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li> 
     <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a></li> 
    </ul> 
</div>

現在爲<li>標記添加一點CSS定義。

li { 
    display: inline-block; 
}

注意，我刪除您的剩餘<ul>標籤寬度的規則 - 它不是足夠寬，以允許所有三個環節並排顯示的一面。這裏有一個JSfiddle來演示代碼的運行。 http://jsfiddle.net/VAP3X/

來源

2013-06-22 20:31:29

謝謝，我發現了另一種方法，但是，看着這個頁面的底部。但你的工作方式更好，所以伊馬去與，非常感謝^ _^ –

經常有很多方法來完成相同的佈局。我很高興我能幫上忙！ –

哦... 1兩件事是pnly顯示2行...我認爲這可能是我的CSS問題，感謝反正^ _ ^ –

我supose這可能是你正在尋找：
（檢查這個http://jsfiddle.net/LpMfZ/）

<!--External Links--> 
<div id="external_links"> 
<ul id="Rowone"> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
</ul> 
<ul id="Rowtwo"> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
</ul> 
<ul id="Rowthree"> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
    <li><a href="http://www.andymark.com/" title="AndyMarks - Distributor"><h3>Andy Mark</h3></a> 
    </li> 
</ul>

而在你的CSS文件：

#external_links ul { 
display: inline-block; 
height:380px; 
width:140px; 
max-width:240px; 
} 
#external_links ul li { 
list-style:none; 
line-height: 0px; 
}

來源

2013-06-22 20:33:36 Sergio

HTML的鏈接部分？

回答

相關問題