Question

它看起来像本页最底部的那个：

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>

Answer 1

让我们重新整理并简化您的代码。我删除了额外的<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/

Answer 2

我想这可能就是你要找的东西：
（查看此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;
}

HTML的链接部分？

2 个答案: