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的链接部分？

回答

相关问题